browserux.css

Interactive Demo.
Some key fixes, before and after.

Scroll down to discover what browserux.css improves, and why it matters. Compare each example before and after browserux.css.

Download ↓ ★ GitHub

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-accent); }

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-accent); }

Accessibility: Usable for everyone

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

Keyboard focus: `:focus-visible`

Mouse clicks should not show an outline, while keyboard navigation should keep a visible focus ring. BrowserUX now uses a safer fallback: :focus stays visible by default, then :focus:not(:focus-visible) removes the ring for pointer interaction in supporting browsers.

Without: generic focus ring behavior

Click me

With browserux.css: fallback on :focus, refined by :focus-visible

Focus target

:focus { outline: var(--bux-focus-width) solid var(--bux-focus-color); outline-offset: var(--bux-focus-offset); }
:focus:not(:focus-visible) { outline: none; }
:focus-visible { outline: var(--bux-focus-width) solid var(--bux-focus-color); outline-offset: var(--bux-focus-offset); }

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

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

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.

Interactive Demo. Some key fixes, before and after.

Box Model: box-sizing: border-box

Button: Font inheritance

Image: The mysterious bottom gap

Horizontal Rule: <hr>

Long words: overflow-wrap: break-word

Headings: text-wrap: balance