Home Github Docs Demo FR |

BrowserUX.css: Interactive Demo

Some key fixes, before and after.

Scroll down to discover what browserux.css improves, and why it matters. Use the button below to toggle browserux.css on or off.

npm install browserux.css

Download

See the CHANGELOG

Reset & Normalization

The bugs that trip every project

Browser defaults that cause layout breaks, visual inconsistencies, and cross-browser headaches. Fixed once, globally.

Box Model: box-sizing: border-box

Without border-box, padding and border add to the declared width. A 200px element with 20px padding and a 4px border renders at 248px.

Without

200px declared → 248px rendered

With browserux.css

200px declared → 200px rendered

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

Button: Font inheritance

Browsers don't inherit the page font on <button>, <input> or <select>. They render in a system font that breaks visual consistency.

Without: different font than the page

With browserux.css: same font as the page

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

Image: The mysterious bottom gap

Images are inline by default. Their bottom aligns with the text baseline, creating a gap inside containers that seems to have no cause.

Without: invisible gap below the image

With browserux.css: vertical-align: middle

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

Horizontal Rule: <hr>

The default <hr> renders as a 3D inset border. Normalized to a clean, theme-consistent line.

Without: 3D inset border

With browserux.css: clean 1px line

hr { border: none; border-top: 1px solid currentColor; color: inherit; }

Long words: overflow-wrap: break-word

Without break-word, a long URL or unbreakable string overflows its container, breaking the layout on narrow screens.

Without: text overflows the box

https://this-is-a-very-long-url-that-overflows.example.com/path/to/page

With browserux.css: wraps cleanly

https://this-is-a-very-long-url-that-overflows.example.com/path/to/page

body { overflow-wrap: break-word; }

Headings: text-wrap: balance

Without it, headings that wrap often leave a single word alone on the last line, a typographic widow. balance distributes words evenly across lines.

Without: orphan word on last line

The fix that saves every project from layout pain

With browserux.css: balanced line breaks

The fix that saves every project from layout pain

h1, h2, h3, h4, h5, h6 { text-wrap: balance; }

Usability

What used to need JavaScript

UX improvements that used to require libraries or scripts, now handled natively by CSS.

Dialog: Native entry animation

@starting-style defines a dialog's state before it opens, enabling a smooth fade + slide. The backdrop fades too. No JavaScript.

/* State before opening, interpolated by the browser */
@starting-style { dialog[open] { opacity: 0; transform: translateY(-8px); } }

Textarea: Auto-resize to content

field-sizing: content makes the textarea grow with its content. No JavaScript auto-resize library. No event listeners.

Without: fixed height, horizontal resize handle

With browserux.css: grows as you type

textarea { field-sizing: content; resize: vertical; }

Links: Underline offset

The default underline crosses through descenders (g, j, p, q, y). A small offset keeps it clear of the glyphs for noticeably better legibility.

Without: underline cuts through descenders

Typography: notice the gjpqy descenders

With browserux.css: clean offset underline

Typography: notice the gjpqy descenders

a { text-underline-offset: 0.2em; }

Form fields: Caret color

The text cursor uses the browser default color. Theming it with the primary accent creates a polished, brand-consistent touch.

Without: default browser caret

With browserux.css: themed caret

input, textarea, [contenteditable] { caret-color: var(--bux-color-primary); }

Layout: Scrollbar gutter stability

When a scrollbar appears or disappears, the content shifts. scrollbar-gutter: stable reserves the space permanently, no more layout jumps.

Without: content shifts when scrollbar appears

Watch this bar's right edge →

Line 2

Line 3

With browserux.css: gutter always reserved

This bar's right edge stays →

Line 2

Line 3

html { overflow-y: scroll; scrollbar-gutter: stable; }

Form controls: accent-color

Checkboxes, radios, and range sliders use a browser-default blue. One accent-color declaration themes them all to your brand color.

Without: browser default blue

Checkbox Radio

With browserux.css: brand primary color

Checkbox Radio

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

Accessibility

Usable for everyone

Keyboard users, screen reader users, users with visual needs. All covered, without extra effort.

Keyboard focus: :focus-visible

Mouse clicks shouldn't show an outline. Keyboard navigation should. :focus-visible lets the browser decide, no visual noise on click, clear ring on Tab.

Without: ring shows on click

Click me

With browserux.css: ring visible only on Tab

Tab to me

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

Form validation: :user-valid / :user-invalid

With :valid/:invalid, required fields show an error on page load before the user types anything. :user-valid/:user-invalid wait for interaction first.

Without/ error state before interaction

Invalid before the user touched it

With browserux.css: validates after interaction

Type something invalid, then click outside

input:user-invalid { background-color: var(--bux-invalid-bg-color); border-color: var(--bux-invalid-border-color); }

Dark mode: color-scheme: light dark

Without this declaration, native UI controls (date pickers, selects, checkboxes) stay light even in dark mode. One line fixes all of them at the system level.

Without: native controls ignore dark mode

With browserux.css: adapts to OS theme

:root { color-scheme: light dark; }

User Preferences

Simulate OS-level settings

No need to open DevTools. See how browserux.css responds to system preferences directly from here.

🌙 Dark Mode

CSS variables adapt via prefers-color-scheme: dark. Validation backgrounds, scrollbar track, everything is covered.

Theme + validation fields

🎛️ Reduced Motion

All animations and transitions are cut to zero via prefers-reduced-motion: reduce.

Animation running

🌓 High Contrast

Placeholders and de-emphasized elements are reinforced under prefers-contrast: more.

Normal text. Italic emphasis. Small text.

🎨 Forced Colors

Windows High Contrast Mode overrides CSS colors. browserux.css restores critical signals using forced-colors: active.

Enable via Windows Settings → Accessibility → Contrast themes.

:focus-visible uses Highlight. Form elements get ButtonText borders restored.