This folder contains BrowserUX lab files.
The goal is to keep a documented watchlist of CSS features that may fit the
browserux.css philosophy later, but are not ready to be integrated into the
main base yet.
This lab also acts as an ongoing technology watch for modern CSS, a place to observe, evaluate, and record emerging features as they mature across browsers.
This folder is not part of the public bundles. It's a working space used to:
- track promising CSS features as they land in browsers
- document why they matter for the BrowserUX philosophy
- note fallback behavior and migration conditions
- decide when a rule is mature enough to move into
browserux.css
| File | Role |
|---|---|
browserux.lab.css |
The lab sheet itself, annotated CSS entries |
README.md |
This file, how the lab works |
browserux.lab.css is never distributed via npm or the CDN. It is a working
document, not a shipping stylesheet.
The lab file mirrors the conceptual structure of browserux.css:
- Design Tokens: token definition, typing, and derivation
- User Preferences:
prefers-*media queries - Native Browser Interface: scrollbars, forms, focus, dialog…
- Browser Default Styles: reset, normalization, HTML elements
This keeps the lab easy to read alongside the main base.
Each feature entry stays short and consistent:
- What it does: a one-line description of the feature
- Status: where it sits in the lab pipeline (see below)
- Why it matters: the BrowserUX-specific rationale
- Migration gate: the conditions under which it can move into
browserux.css - Notes: optional, only when a detail deserves attention
- References: MDN, specs, tracking issues…
- Support: current browser support for the property or selector (e.g.
Chrome 123+, Firefox 120+, Safari 17.5+, Edge 123+)
Keeping entries uniform makes the lab easy to scan and easy to review.
| Status | Meaning |
|---|---|
watching |
Promising, but too early for the main base |
trial |
Worth prototyping locally to evaluate ergonomics and fallback quality |
ready-soon |
Technically strong candidate, waiting for broader confidence |
migrated |
Moved into browserux.css, kept here temporarily as history |
rejected |
Explored, but not a good fit for BrowserUX |
Snapshot of every feature currently tracked in browserux.lab.css, grouped by
the same sections as the lab file.
| Feature | Property / Selector | Status |
|---|---|---|
| Typed Custom Properties | @property |
trial |
| Feature | Property / Selector | Status |
|---|---|---|
| Reduced Data Preference | @media (prefers-reduced-data) |
watching |
| Scripting Availability Query | @media (scripting) |
ready-soon |
| Display Update Capability | @media (update) |
ready-soon |
| Feature | Property / Selector | Status |
|---|---|---|
| CSS Anchor Positioning | anchor-name, position-anchor, anchor(), @position-try |
trial |
| Popover API | [popover], :popover-open, ::backdrop |
ready-soon |
| Customizable Native Select | appearance: base-select, ::picker(select), ::picker-icon |
trial |
| Option Checkmark | ::checkmark |
trial |
| Details Content | ::details-content |
ready-soon |
| Scroll Markers | ::scroll-marker, ::scroll-marker-group, :target-current |
trial |
| Feature | Property / Selector | Status |
|---|---|---|
| Better Long-Form Text Wrapping | text-wrap: pretty |
trial |
| Hanging Punctuation | hanging-punctuation |
watching |
| Font Metric Trimming | text-box-trim, text-box-edge |
watching |
watching → trial → ready-soon → migrated
↘
rejected
A feature typically travels left to right. When it becomes sufficiently
supported and aligned with the project, it is promoted from
lab/browserux.lab.css into the matching section of browserux.css.
Suggestions for new lab entries are welcome. A good candidate is usually a CSS feature that:
- strengthens user experience, accessibility, or browser UI integration
- feels native and minimal (no utility classes, no JS)
- is still too recent or too partially supported to ship by default
When in doubt, open an issue with the feature name, a short rationale, and the support status, and it can be added to the lab for observation.