BrowserUX.css: Not just a reset. A browser upgrade.

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.

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.