browserux.css v5 targets modern browsers with CSS cascade layers. No IE11 support is planned.
The project follows a progressive enhancement model:
- the layer-based base targets browsers with
@layersupport - critical colors have hex fallbacks
- modern color functions are added behind
@supports - unsupported enhancements are ignored without breaking layout
| Browser | Recommended baseline |
|---|---|
| Chrome / Edge | 99+ |
| Firefox | 97+ |
| Safari / iOS Safari | 15.4+ |
| Android Chrome | 99+ |
The baseline is primarily driven by CSS Cascade Layers. Older browsers may ignore large parts of the v5 stylesheet because BrowserUX rules are intentionally placed in named layers.
These features define the v5 base.
| Feature | Chrome / Edge | Firefox | Safari |
|---|---|---|---|
@layer |
99+ | 97+ | 15.4+ |
color-scheme |
81+ | 96+ | 13+ |
prefers-reduced-motion |
74+ | 63+ | 10.1+ |
:focus-visible |
86+ | 85+ | 15.4+ |
accent-color |
93+ | 92+ | 15.4+ |
scrollbar-gutter |
94+ | 97+ | 15.4+ |
Focus still has a visible :focus fallback for browsers that do not support :focus-visible.
BrowserUX v5 uses a four-level color strategy.
| Feature | Chrome / Edge | Firefox | Safari | Fallback |
|---|---|---|---|---|
| Hex color tokens | all | all | all | baseline |
oklch() |
111+ | 113+ | 15.4+ | hex palette |
color-mix() |
111+ | 113+ | 16.2+ | precomputed derived hex values |
light-dark() |
123+ | 120+ | 17.5+ | light-mode semantic hex values |
Browsers without light-dark() keep the light-mode fallback tokens. Browsers without color-mix() keep precomputed derived colors.
| Feature | Chrome / Edge | Firefox | Safari | Notes |
|---|---|---|---|---|
prefers-contrast |
96+ | 101+ | 14.1+ | strengthens tokens |
prefers-reduced-transparency |
118+ | - | 15.4+ | ignored when unsupported |
forced-colors |
89+ / 79+ Edge | 89+ | - | mainly Windows High Contrast |
| Feature | Chrome / Edge | Firefox | Safari | Notes |
|---|---|---|---|---|
:user-valid / :user-invalid |
119+ | 88+ | 16.5+ | validation styles only |
@starting-style |
117+ | 129+ | 17.5+ | dialog entry animation |
field-sizing: content |
123+ | - | - | textarea keeps resize: vertical fallback |
interpolate-size: allow-keywords |
129+ | - | - | ignored when unsupported |
::search-text |
limited | limited | limited | experimental find-in-page styling |
Unsupported native UI enhancements are additive. The corresponding HTML controls remain usable.