BrowserUX.css
A modern alternative to CSS resets and normalize.css, designed with user experience in mind.
browserux.css is a minimalist CSS foundation focused on user experience and accessibility. Designed to enhance the native behavior of HTML and CSS, it provides a modern, consistent base that improves usability across all devices.
Download v2.0.0
For all modern browsers
See the CHANGELOG
npm install browserux.cssSimple at its core, solid on its foundations.
-
🔄 Reset
browserux.css applies a minimalist reset to remove unwanted default browser styles.
-
⚙️ Normalization
Standardizes elements across browsers to ensure consistent behavior.
-
🧩 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.
-
🔣 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.
-
🧩 Usability
- Smooth scrolling (unless disabled by user preferences).
- Optimized tap handling on mobile (touch-action: manipulation).
- Prevents media content from overflowing its container.
- Disables unwanted text selection on interactive elements.
- Forces scrollbar visibility to avoid layout shifts.
- Improved cursor styles for interactive elements.
-
♿ Accessibility
- Respects system preferences: dark mode and reduced motion.
- 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.
-
🔄 Reset
- Universal spacing reset (margin/padding set to 0).
- Box model reset to border-box.
- Removal of list styles and table indentations.
- Neutralization of default button and form field styles.
- 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).
- Harmonized appearance of form fields.
- Consistent rendering of lists and tables.
- Improved responsiveness of media content.
- Consistent scrollbar behavior.