browserux.lab.css
A lab for tomorrow’s CSS.
browserux.lab.css is a documented watchlist of emerging CSS features that may fit the browserux.css philosophy later. A working document, not a shipping stylesheet.
BrowserUX.Lab.css
browserux.lab.css
Watching
↓
Trial
↓
Ready-soon
↓
Migrated
A working document, not a shipping stylesheet.
// The lab is an ongoing technology watch: a place to observe, evaluate, and record emerging CSS features as they mature across browsers.
-
01
Technology watch
Track promising CSS features as they land across browsers.
-
02
Philosophy fit
Document why each feature matters for the BrowserUX philosophy.
-
03
Fallback notes
Record fallback behavior and concrete migration conditions.
-
04
Migration gate
Decide when a rule is mature enough to move into browserux.css.
From spark to shipping.
// Every entry follows the same lifecycle: watching → trial → ready-soon → migrated (or rejected).
-
Watching
Watching
Promising features spotted early, but too immature for the main foundation.
-
Trial
Trial
Worth prototyping locally to evaluate ergonomics and fallback quality.
-
Ready-soon
Ready-soon
Technically strong candidates, waiting for broader cross-engine confidence.
-
Migrated
Migrated
Graduated into browserux.css once alignment, support, and UX all land.
On the watchlist.
// The lab mirrors the four sections of browserux.css, one shelf per concern.
-
01 Design Tokens
- Typed Custom Propertiestrial
@property
-
02 User Preferences
- Reduced Data Preferencewatching
prefers-reduced-data - Scripting Availability Queryready-soon
@media (scripting) - Display Update Capabilityready-soon
@media (update)
-
03 Browser Interface Theme
- CSS Anchor Positioningtrial
anchor-nameposition-anchor - Popover APIready-soon
[popover]:popover-open - Customizable Native Selecttrial
appearance: base-select - Option Checkmarktrial
::checkmark - Details Contentready-soon
::details-content - Scroll Markerstrial
:scroll-marker:target-current
-
04 Default Browser Styles
- Better Long-Form Text Wrappingtrial
text-wrap: pretty - Hanging Punctuationwatching
hanging-punctuation - Font Metric Trimmingwatching
text-box-trim