EN | FR
Not just a reset. A browser upgrade.
browserux.css is a modern CSS foundation focused on user experience and accessibility.
Designed to enhance native HTML and CSS behaviors, it provides a clean, modern baseline that improves usability across all devices, without utility classes, heavy frameworks, or JavaScript.
- Stronger than a reset, lighter than a framework.
- Built for native UX and accessibility from the start.
- Improves focus, validation, dialogs, preferences, and browser UI details.
- Works with semantic HTML, hand-written CSS, and custom design systems.
- Simple by default, modular when needed.
npm
npm install browserux.cssimport 'browserux.css/browserux.css';CDN
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/browserux.css@4.0.0/browserux.css">The CDN example is pinned to 4.0.0 for reproducible installs. Update the version deliberately when you upgrade.
The historical root entry stays available for compatibility. If you want more control, you can use the modular public bundles:
import 'browserux.css/core.css';
import 'browserux.css/a11y.css';
import 'browserux.css/browser-ui.css';
import 'browserux.css/browserux.layer.css';| Bundle | Includes | Recommended for |
|---|---|---|
browserux.css |
Full foundation | Default usage |
core.css |
Tokens + default styles | Safest baseline |
a11y.css |
Tokens + user preferences + default styles | System preference support without the full browser UI layer |
browser-ui.css |
Tokens + browser UI layer | Selection, scrollbars, focus, dialog, form UX |
browserux.layer.css |
Full foundation inside @layer browserux |
Projects using cascade layers |
BrowserUX is built around four core pillars:
- 🔄 Reset: removes problematic browser defaults while preserving useful behavior
- ⚙️ Normalization: aligns rendering across browsers
- 🧩 Usability: improves forms, dialogs, scrolling, layout stability, and native browser ergonomics
- ♿ Accessibility: supports dark mode, reduced motion, contrast preferences, visible focus, and better validation timing
The foundation is organized into four parts:
- 🔣 CSS variables
- ⚙️ user preferences
- 🧩 browser interface theme
- 🧱 default browser styles
browserux.css is easier to understand as a stack of layers:
core.css= the least opinionated foundationa11y.css= the foundation plus modern user-preference supportbrowser-ui.css= the most opinionated BrowserUX layerbrowserux.css= the complete BrowserUX experience
BrowserUX sits in a different place from most CSS starting points:
- broader than
modern-normalize - more UX and accessibility oriented than
sanitize.css - less prescriptive than classless frameworks such as Pico CSS or Water.css
For the full breakdown, see the Comparison guide.
BrowserUX is no longer just documented manually. The project now includes a clearer validation story:
- Browser Support: baseline support, progressive enhancements, and limited-support features
- Demo Validation Matrix: what the demo covers and what should be automated
- Playwright Validation: how to install and run the cross-browser validation setup
The current validation setup already includes Playwright smoke coverage across Chromium, Firefox, and WebKit, plus a first P1 scenario for focus-visible.