BrowserUX.css
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.
npm install browserux.css
Simple at its core, solid on its foundations.
browserux.css is built around four fundamental axes, present in every CSS rule.
-
Reset
Removes unwanted default margins, paddings, and browser styles, while preserving useful semantic behaviors.
-
Normalization
Harmonizes HTML element rendering across browsers to ensure consistent behavior regardless of the environment.
-
Usability
Optimizes UX interaction flow and reduces friction across all types of devices.
-
Accessibility
Ensures the site remains usable for all users, including those using assistive technologies.
Just four parts, all you need.
browserux.css is organized into four logical sections.
-
Variables
Using CSS variables allows for easy theme customization.
-
User Preferences
Handles user-specific preferences detected via media queries.
-
Browser Interface Theme
Applies visual customization to native browser elements.
-
Default Browser Styles
A balanced integration of the four core principles, organized in a logical structure.
Tiny in size, big on features.
-
Reset
- Universal spacing reset (margin/padding set to 0).
- Box model reset to border-box.
- Removal table indentations.
- Neutralization of default button and form field styles.
- Fieldset border and legend padding removed.
- [hidden] elements guaranteed invisible (display: none !important).
- Media elements made responsive.
- Cleansing of default focus outlines in Firefox.
- Neutralized browser field validation styles.
Normalization
- Unified base typography (size, font, line height).
- Standardized typographic behaviors (b, small, sub, sup).
- Balanced heading text wrapping (text-wrap: balance).
- Normalized horizontal rule (hr) rendering.
- Harmonized appearance of form fields.
- Consistent rendering of lists and tables.
- Normalized dialog and dialog::backdrop.
- Improved responsiveness of media content.
- Consistent scrollbar behavior.
-
Usability
- Smooth scrolling (unless disabled by user preferences).
- Smooth light/dark theme transition (respects reduced-motion preference).
- Optimized tap handling on mobile (touch-action: manipulation).
- Prevents media content from overflowing its container.
- Long words and URLs wrap to avoid overflow (overflow-wrap: break-word).
- Disables unwanted text selection on interactive elements.
- Forces scrollbar visibility to avoid layout shifts.
- Scrollbar gutter reserved to prevent layout shifts (scrollbar-gutter: stable).
- Overscroll contained to prevent viewport from chaining (overscroll-behavior: contain).
- Improved cursor styles for interactive elements (pointer, not-allowed).
- Textarea auto-resizes to fit content without JavaScript (field-sizing: content).
- Improved link underline offset for better legibility (text-underline-offset).
- Theme-consistent text cursor in editable fields (caret-color).
- Native dialog entry animation via @starting-style (respects reduced-motion preference).
- Print-optimized styles for cleaner printed output.
-
Accessibility
- Native browser UI adapts to system theme (color-scheme: light dark).
- Respects system preferences: dark mode and reduced motion.
- Full dark mode variable coverage, including validation and scrollbar colors.
- High contrast mode support (prefers-contrast: more).
- Reduced transparency support for dialog backdrop and scrollbar (prefers-reduced-transparency).
- Windows High Contrast Mode support (forced-colors: active).
- Field validation styles only apply after user interaction (:user-valid / :user-invalid).
- Visible keyboard focus outlines using :focus-visible.
- Support for accent-color on form fields.
- Help cursor on elements with additional information (abbr, dfn).
- Neutral validation styles (especially in Firefox).
- Visible and customizable scrollbars, without hiding them using CSS hacks.