EN | FR
Not just a reset. A browser upgrade.
browserux.css is a minimal 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.
Built around four core pillars:
- 🔄 Reset : Removes unwanted browser defaults while preserving useful behaviors.
- ⚙️ Normalization : Ensures consistent rendering across browsers.
- 🧩 Usability : Smooth scrolling, responsive media, mobile tap optimization, layout shift prevention, and more.
- ♿ Accessibility : Dark mode, reduced motion, high contrast, focus management, and full system preference support.
The file is structured in 4 parts:
- 🔣 Variables.
- ⚙️ User preferences.
- 🧩 Browser interface theme.
- 🧱 Browser default styles.
browserux.css covers a broader scope than traditional CSS foundations. Here is a factual overview of what each library addresses.
| Feature | Normalize.css | modern-normalize | sanitize.css | browserux.css |
|---|---|---|---|---|
| Actively maintained | No | Yes | Yes | Yes |
| Approx. size | ~7 KB | ~2 KB | ~5 KB | ~11 KB |
| CSS Variables | No | No | No | Yes |
Native dark mode (prefers-color-scheme) |
No | No | No | Yes |
Reduced motion (prefers-reduced-motion) |
No | No | No | Yes |
High contrast (prefers-contrast) |
No | No | No | Yes |
| Forced colors (Windows High Contrast) | No | No | No | Yes |
Reduced transparency (prefers-reduced-transparency) |
No | No | No | Yes |
Keyboard focus (:focus-visible) |
No | No | Partial | Yes |
Form validation UX (:user-valid / :user-invalid) |
No | No | No | Yes |
Auto-resize textarea (field-sizing: content) |
No | No | No | Yes |
| Scrollbar styling | No | No | No | Yes |
| Print styles | No | No | No | Yes |
Entry animations (@starting-style) |
No | No | No | Yes |
Balanced headings (text-wrap: balance) |
No | No | No | Yes |
| Normalized dialog | No | No | No | Yes |
A full breakdown with explanations is available in the Comparison guide.
CDN
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Effeilo/browserux.css/browserux.css">npm
npm install browserux.cssimport 'browserux.css/browserux.css';- Introduction : philosophy, four pillars, positioning
- Comparison :
browserux.cssvsmodern-normalizevs Tailwind Preflight - Getting Started : CDN, npm, local install
- Customization : overriding CSS variables, creating a theme
- CSS Variables : complete variable table by group
- User Preferences :
prefers-color-scheme,prefers-reduced-motion,prefers-contrast,prefers-reduced-transparency,forced-colors - Browser Interface : text selection, scrollbar, forms, keyboard focus, dialog
- Default Styles : reset, box model, typography, embedded content, tables, forms, print
- Browser Support : compatibility table by feature
- Contributing : report a bug, suggest an improvement, submit a PR
Inspired by Modern Normalize, Paul Irish, CSS Tricks, WebAIM and everyone in the industry who shares open source code.