A Better CSS Reset for Modern Devs – UAplus.css

Preview:

Description:

UAplus.css is a modern CSS reset library that enhances user agent styles rather than stripping them away completely. It provides a better baseline for your stylesheets while maintaining accessibility and browser consistency with minimal opinionated overrides.

Unlike traditional CSS resets that remove all browser defaults, UAplus takes a surgical approach—fixing what’s broken, improving what’s lacking, and leaving what works alone. The result is a lightweight starting point that respects semantic HTML while solving common cross-browser inconsistencies.

Features List

• Universal box-sizing: border-box for a more intuitive layout model.
• Clearer focus states with outline-offset on :focus-visible.
• Disabled text-size-adjust on mobile to prevent unwanted font scaling in landscape.
• Sensible default line-height: 1.5 on html for better readability.
• Stable scrollbar-gutter on html to prevent layout jumps.
• styling, even when nested in <section> or <article>.
• Improved abbr[title] styling with a dotted underline and help cursor.
• Enhanced mark element visibility in Forced Colors Mode.
• Visually hidden screen reader announcements for <del>, <ins>, and <s> elements.
• Responsive embedded content (audio, iframe, img, svg, video) via max-inline-size and max-block-size.
• Prevents fieldset elements from causing overflow by resetting min-inline-size.
• label elements preceding form controls (textarea, input, select) are set to display: block.
• Increased default min-block-size for textarea elements.
• Form elements (button, input, select, textarea) inherit font-family and font-size.
• Normalized [type="search"] input appearance, removing OS-specific styling.
• Maintained LTR direction for tel, url, email, number inputs when they have a value.
• Cleaner table presentation with border-collapse and consistent padding.
• Smooth fade-in/out transitions for <dialog> elements and their backdrops.
• Increased specificity for the [hidden] attribute to ensure elements stay hidden.

How to use it:

Download uaplus.css and place it before your custom stylesheets. This allows your styles to easily override anything from uaplus.css if needed.

<title>My Awesome Project</title>
<link rel="stylesheet" href="path/to/uaplus.css">
<!-- Your other stylesheets -->
<link rel="stylesheet" href="css/main.css">

Comparison with Alternatives:

Traditional Resets (e.g., Eric Meyer’s Reset CSS, CSS Tools: Reset CSS): These aim to strip nearly all browser styling, giving you a “blank slate.” uaplus.css is different; it enhances and adds sensible defaults. If you truly want zero UA styling as a base, a traditional reset is your pick. But I find uaplus.css often saves me from re-implementing common sense styles.

Normalize.css / Sanitize.css: These focus on making HTML elements render consistently across browsers and correcting common browser bugs. uaplus.css shares some of this goal but is more opinionated and goes further by adding its own improvements and accessibility features, not just normalizing. If your sole aim is cross-browser consistency with minimal opinions, Normalize.css is a solid choice. If you want that plus some well-considered enhancements, uaplus.css is a strong contender. I’ve started reaching for uaplus.css more often when I want a slightly more “batteries-included” baseline than Normalize.

No Reset: You could, of course, use no reset at all. But then you’re on the hook for handling all UA inconsistencies and desired base styles yourself. uaplus.css provides a curated set of fixes and improvements that can save considerable time.

FAQs:

Q: Will uaplus.css conflict with my existing styles or CSS frameworks?
A: It’s designed to be a foundational layer. The widespread use of the :where() pseudo-class for many of its rules keeps their specificity at zero. This means your custom styles or framework styles should generally override uaplus.css rules without needing !important or complex selectors. However, if you’re using a comprehensive CSS framework that includes its own extensive reset or base styling (like Bootstrap or Tailwind’s preflight), you’d typically choose one or the other, or very carefully manage the import order. I’ve found uaplus.css plays well when loaded first.

Q: The screen reader announcements for <del>, <ins>, and <s> are in English. How do I localize them?
A: The library itself provides English defaults. The comments in the CSS source explicitly mention this: For languages other than English, you should provide translations, e.g. :lang(de) :where(s::before) { content: "Durchgestrichener Text Beginn "; }. You’ll need to add these :lang() overrides in your own stylesheet for any languages your site supports.

Q: Why [hidden]:not([hidden="until-found"]) { display: none !important; }? Isn’t !important generally bad practice?
A: Yes, !important should be used sparingly. In this specific case, it’s a deliberate, pragmatic decision. The [hidden] attribute’s purpose is to hide an element. Using !important ensures this rule has enough strength to override other display properties that might be unintentionally making the element visible. The :not([hidden="until-found"]) selector is crucial because it preserves the intended behavior for content that should be findable by in-page search even when visually hidden, a newer HTML feature. It’s a targeted use of !important to enforce a fundamental HTML attribute’s behavior.