Welcome to the browserux.css documentation

I. Philosophy

2. Guiding Principles

• Use only native HTML elements, without relying on utility classes.
• Built around four fundamental pillars:
  • 🔄 Reset
  • ⚙️ Normalization
  • 🧩 Usability
  • ♿ Accessibility

II. How to Use

Whether you're building a static site or a modern front-end project, browserux.css integrates easily with any workflow. Here are three simple ways to add it to your project:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Effeilo/browserux.css/browserux.css">

npm install browserux.css

<link rel="stylesheet" href="/path/to/browserux.css">

<link rel="stylesheet" href="./node_modules/browserux.css/browserux.css">

import 'browserux.css/browserux.css';

4. Quick Summary

III. Contenu du fichier

2. Browser User Preferences

The browserux.css file takes into account certain system-level user preferences to improve ergonomics and accessibility, all without JavaScript.

Theme Preferences (prefers-color-scheme)

Users can enable dark mode at the OS or browser level. This section dynamically adjusts CSS variables to reflect that preference.

@media (prefers-color-scheme: dark) {
	:root {
		/* Exemples : */
		--bux-page-bg: #121212;
		--bux-page-color: #eaeaea;
		--bux-color-primary: #f05e0e;
		--bux-color-secondary: #0e93f0;
		/* etc. */
	}
}

• No JavaScript required.
• The theme automatically follows the user’s system preferences.
• Easy to customize through CSS variables.

♿ Accessibility and 🧩 Usability

Smooth Transition

Enables a soft transition when switching between light and dark themes (automatically or manually):

body {
	transition: background-color 0.3s, color 0.3s;
}

🧩 Usability

Want to learn more about light and dark themes? Read our full guide on the blog:
Guide: Managing Light and Dark Themes with HTML, CSS, and JavaScript

Animation Preferences (prefers-reduced-motion)

Some users prefer reduced motion to avoid distractions or unpleasant effects caused by animations.

@media (prefers-reduced-motion: reduce) {
	* {
		animation-duration: 0s !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-duration: 0s !important;
	}
}

Effects applied:

Property	Targeted Effect
animation-duration: 0s	Disables animations
animation-iteration-count: 1	Stops infinite loops
scroll-behavior: auto	Disables smooth scrolling
-transition-duration: 0s	Disables transition effects

♿ Accessibility

Smooth Scrolling (scroll-behavior)

If the user hasn’t disabled animations, smooth scrolling is enabled across the document (anchor links, navigation, etc.).

@media (prefers-reduced-motion: no-preference) {
	:root {
		scroll-behavior: smooth;
	}
}

🧩 Usability

These preferences are natively handled by CSS, no scripts needed, and contribute to a smooth, inclusive, and modern user experience.

Want to learn more about prefers-reduced-motion? Check out our full article on the blog:
CSS: Adapting Animations to User Preferences with prefers-reduced-motion

Contrast Preferences (prefers-contrast)

Users can indicate a preference for enhanced visual contrast, usually through their operating system settings (Windows, macOS, etc.). This CSS section improves the readability of interface elements that are often too subtle by default.

@media (prefers-contrast: more) {

Activates this block only if the user has explicitly requested increased contrast.

::placeholder {
	color: rgba(16, 16, 16, 0.8);
	opacity: 1;
}

• ::placeholder: Targets placeholder text in form fields (input, textarea, etc.).
• color: rgba(16, 16, 16, 0.8);: Applies a dark gray tone with slight transparency to increase contrast while remaining visually distinct from actual input content.
• opacity: 1;: Some browsers apply reduced opacity by default, this line ensures full opacity for consistent legibility.

[disabled] {
	color: rgba(16, 16, 16, 0.8);
}

• [disabled]: Targets any HTML element with thedisabled attribute (inputs, buttons, selects, etc.).
• color: rgba(16, 16, 16, 0.8);: Prevents these elements from appearing overly faded or hard to see, while still clearly indicating their disabled state.

::selection {
	text-shadow: none;
}

• ::selection: Customizes the appearance of text when selected (via mouse or keyboard).
• text-shadow: none;: Removes any shadow or glow effect (often used in dark themes) that could reduce text clarity in high-contrast modes.

em,
i,
small {
	font-weight: bold;
}

• em, i: These tags typically render emphasized text in italic, which can become hard to read under high-contrast conditions.
• small : Reduces text size, making it potentially difficult to read.
• font-weight: bold;:Visually reinforces these elements to improve accessibility without altering their semantic meaning.

Benefits Summary:

• Improves readability of typically subtle or visually de-emphasized elements.
• Requires no JavaScript: pure CSS.
• Compatible with all modern browsers that support prefers-contrast.
• Pairs elegantly with prefers-color-scheme for fully adaptive theming based on user preferences.

♿ Accessibility and 🧩 Usability

Want to learn more about prefers-contrast? Check out our full article on the blog:
CSS: Improve Accessibility by Respecting Users’ Contrast Preferences with prefers-contrast

3. Browser Interface Theme

The "Browser UI Theme" section of browserux.css customizes several native browser elements, such as text selection, scrollbars, form components, or collapsible elements, to improve visual consistency, usability, and accessibility.

Text Selection (::selection)

Customizes the appearance of text selected by the user (background, color, shadow).

::selection {
	background: var(--bux-selection-bg);
	color: var(--bux-selection-color);
	text-shadow: var(--bux-selection-text-shadow);
}

🧩 Usability

Scrollbars

Customizes native scrollbars to provide a more consistent appearance across browsers. Supports WebKit/Blink (Chrome, Safari, Edge Chromium) and Firefox (Gecko).

Firefox Support (Gecko)

@supports (-moz-appearance: none) {
	html {
		scrollbar-color: var(--bux-scrollbar-thumb) var(--bux-scrollbar-track);
		scrollbar-width: auto;
	}
}

WebKit / Blink Support (Chrome, Safari, Edge Chromium)

::-webkit-scrollbar {
	background: var(--bux-scrollbar);
	height: var(--bux-scrollbar-horizontal-height);
	width: var(--bux-scrollbar-vertical-width);
}

::-webkit-scrollbar-thumb {
	background-color: var(--bux-scrollbar-thumb);
}

::-webkit-scrollbar-thumb:hover {
	background-color: var(--bux-scrollbar-thumb-hover);
}

Removes unnecessary buttons and corners for a cleaner appearance.

::-webkit-scrollbar-button {
	display: none;
}

::-webkit-scrollbar-corner {
	background: transparent;
}

By aligning scrollbars with the global theme, visual consistency and user comfort are improved across all modern browsers.

🧩 Usability

Want to learn more about customizing scrollbars? Read our full article on the blog:
CSS: Customize Scrollbars the Modern Way

Form Components

This section enhances the appearance and readability of native form components (checkbox, radio, range, select, progress, etc.) by customizing accent colors, validation states, placeholders, and sliders. It aims for better visual consistency without compromising accessibility.

Placeholder Color

Customizes the color of hint text in empty fields (::placeholder).

::placeholder {
	color: var(--bux-placeholder-color);
}

🧩 Usability

Accent Colors (accent-color)

Applies the theme’s primary color to supported form elements.

input[type="checkbox"],
input[type="radio"],
input[type="range"],
meter,
select {
	accent-color: var(--bux-color-primary);
}

progress {
	accent-color: var(--bux-progress-value-bg);
}

🧩 Usability

range Slider

Customizes the thumb (slider handle) of the range input component in WebKit and Firefox.

input[type="range"]::-webkit-slider-thumb,
input[type="range"]::-moz-range-thumb {
	background: var(--bux-color-primary);
	border: none;
}

🧩 Usability

Field Validation States

Modifies the appearance of valid or invalid fields (border, background, placeholder).

input:valid, 
textarea:valid, 
select:valid {
	background-color: var(--bux-valid-bg-color);
	border-color: var(--bux-valid-border-color); 
}

input:invalid, 
textarea:invalid, 
select:invalid {
	background-color: var(--bux-invalid-bg-color);
	border-color:  var(--bux-invalid-border-color);
}

input:invalid::placeholder, 
textarea:invalid::placeholder {
	color: var(--bux-invalid-placeholder-color);
}

♿ Accessibility and 🧩 Usability

Progress Bar (progress)

Unifies the native appearance of progress bars in WebKit and Firefox.

progress::-webkit-progress-bar {
	background-color: var(--bux-progress-bar-bg);
	border-radius: 8px;
}

progress::-webkit-progress-value {
	background-color: var(--bux-progress-value-bg);
	border-radius: 8px;
}

progress::-moz-progress-bar {
	background-color: var(--bux-progress-bar-bg);
}

🧩 Usability

Collapsible Interactive Components

This section improves the appearance of native HTML details and summary elements, often used to create accessible accordion-like components without JavaScript. It applies the theme’s accent color to maintain visual consistency with other form elements.

Accent Color (accent-color)

Applies the theme’s primary color to native arrows and markers (notably in Safari/Chrome).

⚠️ accent-color only works in Safari/macOS and iOS to style the summaryarrow. Other browsers (Chrome, Edge, Firefox) ignore this property on these elements. For consistent cross-browser styling, use summary::marker or a custom icon via (::before).

details,
summary {
	accent-color: var(--bux-color-primary);
}

🧩 Usability

Keyboard Focus Accessibility

This section manages the appearance of the outline focus ring to improve keyboard accessibility without interfering with mouse interactions.
It uses the :focus-visible pseudo-class, which allows distinguishing keyboard navigation from mouse or touch input.

Removing Focus on Mouse Click

:focus {
	outline: none;
}

🧩 Usability

Accessible Keyboard Focus (:focus-visible)

Displays a visible focus ring only during keyboard use, making accessible navigation easier.

:focus-visible {
	outline: 2px solid var(--bux-color-primary);
	outline-offset: 2px;
}

♿ Accessibility

Result

• Keyboard users get a clear visual indicator.
• Mouse users don’t see unnecessary outlines after clicks.
• The style remains consistent thanks to theme CSS variables.

Want to learn more about focus management? Read our full article on the blog:
CSS: Managing Focus for Accessibility

4. Default Browser Styles

This section forms the ergonomic and typographic foundation of browserux.css. It draws inspiration from modern resets (like normalize.css), while going further in terms of usability, accessibility, and UX best practices.

Spacing Reset

This section removes all default margin and padding applied by browsers to HTML elements. This creates a clean, predictable base, essential for any custom stylesheet.

*,
*::before,
*::after {
	margin: 0;
	padding: 0;
}

🔄 Reset

Box Model

By default, browsers use content-box, which can make sizing unpredictable when borders and padding are involved. This section applies border-box globally, making dimension calculations more intuitive and consistent.

Inheriting box-sizing

Ensures that all elements inherit the value defined on html.

*,
::before,
::after {
	box-sizing: inherit;
}

🔄 Reset

Global Application via the html Root Element

Makes width and height calculations more predictable throughout the entire document.

html {
	box-sizing: border-box;
}

⚙️ Normalization

html Root Element

This section sets the global behavior of the HTML document starting from the html. element. It configures typography, minimum height, font rendering, scrolling, and mobile ergonomics to establish a stable, consistent, and accessible foundation.

html {
	font-family: var(--bux-typo-font-family);
	font-size: 62.5%;
	min-height: 100%;
	overflow-y: scroll;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	-webkit-tap-highlight-color: transparent;
	tab-size: 4;
	-moz-tab-size: 4;
	text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
}

Consistent Typographic Base

Ensures uniform typography across browsers, instead of relying on the system default font which can vary between operating systems.

font-family: var(--bux-typo-font-family);

⚙️ Normalization

Defines a base of 1rem = 10px to simplify calculations (e.g., 1.6rem = 16px). This is a readability convention, not a reset.

font-size: 62.5%;

🧩 Usability and ♿ Accessibility

Improves readability of indentations (e.g., in pre or code) by setting the tab size to 4 spaces.

tab-size: 4;
-moz-tab-size: 4;

⚙️ Normalization and 🧩 Usability

Stable Layout

Ensures the html element fills the full height of the viewport, making it easier to build 100vh layouts using flex or grid. This is not a native behavior in all browsers.

min-height: 100%;

🧩 Usability

Forces the scrollbar to be visible even when there's no overflow, preventing layout "jumps" between pages with and without scrollbars. Very useful for visual stability.

overflow-y: scroll;

🧩 Usability

Font Rendering Enhancement

Improves typography rendering consistency between macOS (or WebKit) and other platforms, especially to avoid blurry text.

-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;

⚙️ Normalization and 🧩 Usability

Touch and Mobile Optimization

Removes the gray/blue "flash" that appears when tapping links or interactive elements on Android/iOS WebKit. Improves the touch experience.

-webkit-tap-highlight-color: transparent;

🧩 Usability

Prevents iOS Safari from resizing text after rotation or zoom, while still respecting user zoom preferences. Unlike user-scalable=no, this method remains accessible.

text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;

♿ Accessibility

Sections

This section initializes the foundational styles of the page through the body element, which is considered a sectioning root in HTML. It sets up the visual base: background, text color, typography, and ensures a full-page minimum height, useful for layouts.

body {
	background: var(--bux-page-bg);
	color: var(--bux-page-color);
	font-size: var(--bux-typo-font-size);
	line-height: var(--bux-typo-line-height);
	min-height: 100%;
}

Color Initialization

Applies the theme’s primary colors (light/dark) as soon as the page loads.

background: var(--bux-page-bg);
color: var(--bux-page-color);

🧩 Usability

Typographic Base

Defines the base text size at the body level, which is then inherited by all child elements. Provides a consistent baseline across browsers using a CSS variable, instead of relying on inconsistent browser defaults.

font-size: var(--bux-typo-font-size);

⚙️ Normalization

A good line-height ensures better reading comfort, especially for people with cognitive or visual impairments.

line-height: var(--bux-typo-line-height);

⚙️ Normalization et ♿ Accessibility

Full-Height Layout

Ensures layouts using 100vh, flex, grid, or a sticky footer work properly without the "blank page effect."

min-height: 100%;

🧩 Usability

Content Grouping

his section focuses on HTML elements used to structure content in blocks: lists, blockquotes, code snippets, etc. It ensures these elements are visually consistent, accessible, and easy to style.

Prevents Horizontal Overflow

Prevents content like blockquotes (blockquote) or code blocks (pre) from overflowing their containers.

blockquote,
pre {
	max-width: 100%;
}

🧩 Usability

Consistent Monospace Typography

Applies a consistent set of monospace fonts across all browsers, useful for pre blocks.

pre {
	font-family: var(--bux-typo-font-family-mono);
}

⚙️ Normalization

Removes Default List Styles

Removes automatic bullets and numbering to allow for fully customized styling. This is a classic reset CSS technique!

ol,
ul {
	list-style: none;
}

🔄 Reset

Text-Level Semantics

This section applies to inline HTML elements used to structure semantic text: links, abbreviations, emphasis, subscript, code blocks, etc. It improves their readability, accessibility, typographic consistency, and touch behavior.

Links (a)

a {
	outline: 0;
	text-decoration: none;
	text-decoration-skip-ink: auto;
	touch-action: manipulation;
}

Removes the focus outline (replaced elsewhere with :focus-visible)

outline: 0;

🔄 Reset

Removes the default underline from links

text-decoration: none;

🔄 Reset

Improves the underline to prevent collisions with letters

text-decoration-skip-ink: auto;

🧩 Usability

Removes the 300ms delay on mobile (tap delay)

touch-action: manipulation;

🧩 Usability

Abbreviations and Definitions (abbr, dfn)

abbr[title],
dfn[title] {
	cursor: help;
	text-decoration: underline dotted;  
}

Changes the cursor to indicate that information is available

cursor: help;

♿ Accessibility and 🧩 Usability

Adjusted underline to distinguish technical terms

text-decoration: underline dotted;

⚙️ Normalization

Bold Text (b, strong)

Ensures that b and strong tags are displayed with a clearly visible weight, even if the font doesn’t handle it well natively. Provides a consistent appearance of bold text across browsers.

b, 
strong {
	font-weight: bolder;
}

⚙️ Normalization

Code and Keyboard (code, kbd, samp)

Applies a consistent monospace font for all code blocks, keyboard input, and terminal examples. Ensures a readable and uniform display of code, regardless of browser or OS.

code, 
kbd, 
samp {
	font-family: var(--bux-typo-font-family-mono);
}

⚙️ Normalization

white-space allows code blocks to preserve line breaks while enabling automatic line wrapping if the text is too long. Improves readability on mobile or small screens. max-width prevents overflow.

code {
	max-width: 100%;
	white-space: pre-wrap;
}

🧩 Usability

Small Text (small)

Provides a consistent size for small elements, which are often too small or inconsistent across browsers.

small {
	font-size: 80%;
}

⚙️ Normalization

Subscripts and Superscripts (sub, sup)

Fixes the vertical alignment and size of subscripts (sub) and superscripts (sup), which can cause line-height issues. Ensures a clean and readable appearance across all browsers.

sub, 
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub { bottom: -0.25em; }
sup { top: -0.5em; }

⚙️ Normalization and ♿ Accessibility

Embedded Content

This section applies to HTML multimedia elements such as images (img), SVGs, videos, or clickable areas (area). It improves their responsiveness, touch usability, and graphical customization.

Touch Usability (area)

Removes the 300ms delay on clickable areas (area) in image maps for better mobile responsiveness.

area {
	touch-action: manipulation;
}

🧩 Usability

Inline media elements (audio, canvas, iframe, img, svg, video)

Prevents unwanted vertical spacing beneath media elements when displayed inline (inline or inline-block). This spacing is caused by the default alignment to the text baseline. Setting vertical-align: middle; ensures consistent visual alignment by centering the elements vertically within the line, improving layout precision in mixed text/media contexts.

audio,
canvas,
iframe,
img,
svg,
video {
	vertical-align: middle;
}

⚙️ Normalization and 🧩 Usability

Preventing Image Selection

Removes the highlight effect (often purple/blue) when selecting text or dragging over an image. Prevents unwanted visual effects, especially when accidentally dragging an image.

img::selection {
	background-color: var(--bux-transparent);
}

🧩 Usability

Images, SVGs & Videos (img, svg, video)

Preserves the natural proportions of multimedia elements and prevents media from overflowing their container width. Together, these rules enable smooth and responsive scaling of images and videos, ensuring good adaptation on all types of screens.

img, 
svg, 
video {
	height: auto;
	max-width: 100%;
}

⚙️ Normalization and 🧩 Usability

SVG Theming (fill)

Sets the fill color of SVGs from color, allowing SVG icons to be thematically styled automatically. SVGs automatically inherit the theme without needing specific inline styles.

svg {
	fill: currentColor;
}

⚙️ Normalization

Tabular Data

This section improves the handling of table and td elements by fixing inconsistencies across browsers and preventing overflow on small screens. It ensures better readability, visual consistency, and mobile adaptability.

Fixing Inheritance and Indentation Bugs

Fixes a style bug where borders do not match the text color (Chrome/Safari) and removes the automatic text indentation in some versions of WebKit. These two rules correct native style inconsistencies in certain browsers.

table {
	border-color: inherit;
	text-indent: 0;
}

⚙️ Normalization

Preventing Overflow

Prevents tables or cells from overflowing their container, especially on small screens. Improves responsiveness and prevents unwanted horizontal scrollbars.

table, 
td {
	max-width: 100%;
}

🧩 Usability

Forms

This section aims to standardize the appearance of form fields, improve mobile usability, and fix native inconsistencies across browsers. It deals with elements such as button, input, select, textarea, progress, etc.

Resetting Buttons

Removes the default style applied to buttons (background, border, etc.) and prevents accidental text selection during double-clicks.

button {
	appearance: none;
	border: none;
	background: none;
	user-select: none;
}

🔄 Reset and 🧩 Usability

Mobile Responsiveness

Removes the touch delay of ~300ms on clickable elements (essential on mobile).

button, 
input, 
label, 
select, 
textarea {
	touch-action: manipulation;
}

🧩 Usability

Inheriting Font Styles

Ensures typographic consistency between form fields and the rest of the site (same font, same size).

button,
input,
optgroup,
select,
textarea {
	font-family: inherit;
	font-size: 100%;
}

⚙️ Normalization

Remove Forced Uppercase

Disables automatic (uppercase) transformations imposed by certain browsers (Edge, Firefox).

button,
select {
	text-transform: none;
}

⚙️ Normalization

Pointer Cursor for Clickable Elements

Displays a pointer cursor to reinforce the interactive nature of clickable elements.

button:not(:disabled),
[type=button]:not(:disabled),
[type=reset]:not(:disabled),
[type=submit]:not(:disabled),
label[for],
select {
	cursor: pointer;
}

🧩 Usability

iOS / Safari Compatibility

Forces buttons to render with their native appearance in Safari, while still maintaining CSS control.

button,
[type="button"],
[type="reset"],
[type="submit"] {
	appearance: button;
	-webkit-appearance: button;
}

⚙️ Normalization

Handling Overflow

Prevents input and textarea elements from overflowing their container width.

input, 
textarea {
	max-width: 100%;
}

🧩 Usability

Allow Text Selection

Allows the user to select text in fields (which is sometimes blocked by default).

input, 
select, 
textarea {
	user-select: text;
}

♿ Accessibility

Search Fields (type="search")

Fixes their style in Safari and Chrome to prevent extra outlines or decorations.

[type="search"] {
	appearance: textfield;
	-webkit-appearance: textfield;
	outline-offset: -2px;
}

[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

⚙️ Normalization

Aligning progress

Vertically aligns progress bars with the surrounding text.

progress {
	vertical-align: baseline;
}

⚙️ Normalization

Vertical Resizing Only

Prevents horizontal resizing of textarea elements to avoid overflow and maintain mobile usability.

textarea {
	resize: vertical;
}

🧩 Usability

Upload Button on iOS/Safari

Restores proper rendering of the file button (input[type="file"]) and inherits the correct font.

::-webkit-file-upload-button {
	appearance: button;
	-webkit-appearance: button;
	font: inherit;
}

⚙️ Normalization

Spin Buttons in Numeric Fields

Fixes their alignment in Safari.

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
	height: auto;
}

⚙️ Normalization

Firefox: Remove Internal Focus Style

Prevents the addition of a border or padding when a field is selected via keyboard.

::-moz-focus-inner {
	border-style: none;
	padding: 0;
}

⚙️ Normalization

Firefox: Remove Invalid Field Styles

Removes the default red borders or shadows on invalid fields.

:-moz-ui-invalid {
	box-shadow: none;
}

♿ Accessibility

Interactive Elements

This section ensures that certain native elements like summary (within a details) or elements with role="button" behave consistently, smoothly, and accessibly across all browsers and devices.

Consistent Rendering of summary

By default, the visual behavior of summary varies across browsers. By forcing it to display as a list item (list-item), we improve its readability, accessibility, and compatibility with screen readers.

summary {
	display: list-item;
}

⚙️ Normalization et ♿ Accessibility

Smooth Touch Behavior

Prevents text selection on elements that behave like buttons (such as asummary or an element with role="button"). This avoids unwanted visual effects during long presses or rapid clicks.

[role="button"],
details[open] summary,
summary {
	user-select: none;
}

🧩 Usability

IV. Browser Support

• 🌈 Chrome (latest versions)
• 🦊 Firefox (latest versions)
• 🧭 Safari 13+
• 📘 Edge Chromium
• 🤖🌐 Modern Android browsers
• 📱🧭 Safari iOS 13+

No support for legacy browsers. A progressive enhancement approach ensures graceful and functional degradation.

V. Contributing to the Project

Contributions are welcome! Whether you'd like to report a bug, suggest an improvement, add a new feature, or fix a typo, feel free to get involved.

3. Best Practices

• Stay true to the project's minimalist, accessible, and native-first approach.
• Comment your code to make reviews easier.
• Focus on clear, targeted, and well-documented changes.
• Test your changes in the latest versions of modern browsers before submitting a PR.

VI. Licence

MIT License, Free to use, modify, and distribute.

• MIT License Details