Not just a reset. A browser upgrade.
Every web project starts the same way. You add normalize.css or a CSS reset, and move on. Then three hours later, you add a media query for prefers-reduced-motion. Two weeks after that, you copy a scrollbar snippet from Stack Overflow. A month later, you fix focus styles for keyboard users.
By the end of the project, you have accumulated a dozen CSS fragments scattered across files, pulled from different sources, with no structure and no coherence. Then you do it again on the next project.
browserux.css was born from that observation.
It Started with ergonomize.css
Before browserux.css, I built ergonomize.css: a CSS file designed to complement normalize.css with practical UX improvements. It handled things normalize.css deliberately ignored: form ergonomics, media queries for user preferences, mobile tap delays.
It worked, but it was a complement, not a foundation. Over time, I wanted to go further: merge the normalization, the ergonomics, and the accessibility into a single, structured file. That file became browserux.css.
The Problem It Solves
In most web projects, the CSS foundation is assembled on the fly:
- A reset or normalize.css to start
- A few snippets for better form rendering
- Some media queries for user preferences
- Focus style fixes for keyboard navigation
- Scrollbar tweaks copied from a blog post
These adjustments come from different sources, added at different times, with no global structure. The result: a growing pile of scattered CSS that every new project inherits and rarely cleans up.
There is also an unspoken lie in how normalize.css gets used. In theory, it is enough: it normalizes without resetting, preserves useful styles, and lets the browser do its job. That is a respectable philosophy. In practice, nobody stops there. A global box-sizing: border-box, margin resets on headings, padding removal on lists... these adjustments are nearly universal, but normalize.css does not make them because that is not its purpose.
The real-world result: normalize.css plus a custom reset plus additional snippets. Three stacked layers where one would do. browserux.css starts from that observation and is honest about it: yes, there is some reset in there. Better to do it cleanly, once, in a single structured file.
There is a third problem, more subtle: CSS moves fast. New properties regularly reach enough browser adoption to be used safely in production. field-sizing, text-wrap: balance, @starting-style, scrollbar-gutter... Knowing what to adopt, when, and with which fallbacks, requires constant monitoring that most projects cannot afford.
browserux.css also solves that: staying current with the latest CSS features as browser support matures, without having to do that research yourself. Each version integrates new properties at the point where their support is broad enough to use with confidence.
browserux.css replaces that pile with a single unified file: opinionated where it needs to be, minimal everywhere else.
What It Does
Built around four pillars:
Reset. Removes unwanted browser defaults while preserving behaviors that are useful and semantic. Not a scorched-earth reset that strips everything indiscriminately.
Normalization. Consistent rendering across browsers, without overriding styles that already work well.
Usability. Smooth scrolling, responsive media, auto-resizing textareas, layout shift prevention, mobile tap optimization. Better UX by default, before JavaScript enters the picture.
Accessibility. Native dark mode, reduced motion, high contrast support, forced colors for Windows High Contrast Mode, keyboard-only focus with :focus-visible.
That last pillar is what truly sets browserux.css apart. Five system preferences covered natively, in pure CSS:
@media (prefers-color-scheme: dark) { ... }
@media (prefers-reduced-motion: reduce) { ... }
@media (prefers-contrast: more) { ... }
@media (prefers-reduced-transparency: reduce) { ... }
@media (forced-colors: active) { ... }
No other mainstream CSS foundation covers all five. Zero JavaScript required.
You can see all of these features in action on the interactive demo.
Who It Is For
browserux.css is for developers who write their CSS manually, with or without a preprocessor (Sass, PostCSS), and want a solid foundation without starting from scratch on every project.
If you use Tailwind, Bootstrap, or another CSS framework, their built-in base is likely a better fit for your context. browserux.css is not designed to sit on top of a utility framework.
It is also not a framework itself. It provides no grid, no components, no utility classes. It prepares the ground so everything you build on top of it starts from a clean, accessible, up-to-date baseline.
Try It
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Effeilo/browserux.css/browserux.css">
Top comments (0)