DEV Community

Cover image for Normalize.css Is Dead. Here's What to Use Instead.
Effeilo
Effeilo

Posted on • Originally published at blog.browserux.com

Normalize.css Is Dead. Here's What to Use Instead.

#webdev #css #frontend #opensource

Normalize.css Is Dead. Here's What to Use Instead.

Not just a reset. A browser upgrade.

Normalize.css was a landmark project. For years, it was the go-to starting point for web projects: a reliable, well-documented file that ironed out browser inconsistencies without erasing everything like a CSS reset would.

But normalize.css is no longer maintained. The last commit was in 2019. The browsers it was written for have moved on. And the web has moved on with them.

So what should you use instead in 2026?

What Normalize.css Actually Did

Normalize.css had a clear, singular goal: make browsers render HTML elements consistently, without removing styles that are useful by default.

It preserved heading sizes, list markers, and form element rendering. It fixed known browser bugs. It was deliberately minimal and unopinionated.

That philosophy was sound. But it left a lot on the table.

Why It Is No Longer Enough

Normalize.css was never designed to handle what modern web development requires:

  • User preferences. prefers-color-scheme, prefers-reduced-motion, prefers-contrast, forced-colors. None of these existed when normalize.css was written. None of them are handled by its successors either.
  • Modern CSS properties. text-wrap: balance, field-sizing: content, scrollbar-gutter, @starting-style. These are production-ready today and belong in a base stylesheet.
  • Keyboard accessibility. :focus-visible replaces the blunt :focus selector. Without it, removing the default outline harms keyboard users.
  • Form UX. :user-valid and :user-invalid enable validation feedback only after the user has interacted with a field, not on page load.

Normalize.css does none of this. Neither does its most direct successor, modern-normalize.

What It Passed On

Normalize.css also established quality standards worth acknowledging: a readable file, organized into clear sections, with a precise comment above each CSS rule explaining why it is there and what bug or behavior it addresses.

That care for inline documentation is rare in stylesheets. It turns a CSS file into a learning resource: you understand the reasoning, not just the result.

browserux.css was directly inspired by this approach. Every rule is commented, every section is delimited, every choice is justified. The goal is the same: the file should be readable and understandable by anyone who opens it, not just its author.

That is normalize.css's most lasting contribution, and it is worth carrying forward.

What About modern-normalize?

modern-normalize is actively maintained and well-regarded. It inherits normalize.css's philosophy of doing one thing: fixing cross-browser inconsistencies.

It is a good choice if that is all you need. But it deliberately stops there. No user preferences, no modern CSS features, no accessibility improvements beyond what browsers already provide.

If you reach for modern-normalize, you will still end up adding the rest yourself.

A More Complete Alternative: browserux.css

browserux.css starts where normalize.css and modern-normalize stop.

It handles cross-browser normalization, adds a minimal reset where practical (because nobody actually stops at pure normalization), and layers in the modern CSS features and accessibility improvements that a base stylesheet should cover in 2026.

Here is what you get that normalize.css never provided:

System preference support:

@media (prefers-color-scheme: dark) { ... }
@media (prefers-reduced-motion: reduce) { ... }
@media (prefers-contrast: more) { ... }
@media (prefers-reduced-transparency: reduce) { ... }
@media (forced-colors: active) { ... }
Enter fullscreen mode Exit fullscreen mode

Keyboard focus, done right:

:focus {
  outline: none;
}

:focus-visible {
  outline: 3px solid var(--bux-color-focus);
  outline-offset: 3px;
}
Enter fullscreen mode Exit fullscreen mode

Auto-resizing textarea:

textarea {
  field-sizing: content;
}
Enter fullscreen mode Exit fullscreen mode

Layout shift prevention:

html {
  scrollbar-gutter: stable;
}
Enter fullscreen mode Exit fullscreen mode

Balanced headings:

h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}
Enter fullscreen mode Exit fullscreen mode

Which One Should You Use?

normalize.css modern-normalize browserux.css
Actively maintained No Yes Yes
Cross-browser normalization Yes Yes Yes
User preference support No No Yes
Modern CSS features No No Yes
Keyboard focus (:focus-visible) No No Yes
Form validation UX No No Yes
Native dark mode No No Yes

If you are starting a new project today and writing your CSS manually, browserux.css is the more complete starting point. If you only need cross-browser normalization and nothing else, modern-normalize is the right tool. You can explore what browserux.css adds on the interactive demo.

What you should not use is normalize.css. It served its purpose. It is no longer maintained. The web has moved on.

Try browserux.css 

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Effeilo/browserux.css/browserux.css">
Enter fullscreen mode Exit fullscreen mode

Top comments (0)