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.
-
🔭
Technology watch
Track promising CSS features as they land across browsers.
-
🎯
Philosophy fit
Document why each feature matters for the BrowserUX philosophy.
-
🧰
Fallback notes
Record fallback behavior and concrete migration conditions.
-
🚦
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
Promising features spotted early, but too immature for the main foundation.
-
🧪
Trial
Worth prototyping locally to evaluate ergonomics and fallback quality.
-
✅
Ready-soon
Technically strong candidates, waiting for broader cross-engine confidence.
-
📦
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.
-
🎨
Design Tokens
- Typed Custom Properties (
@property): trial
- Token Pairing With
light-dark(): ready-soon
⚙️
User Preferences
- Reduced Data Preference (
prefers-reduced-data): watching
- Scripting Availability Query (
@media (scripting)): ready-soon
- Display Update Capability (
@media (update)): ready-soon
-
🖼️
Browser Interface Theme
- CSS Anchor Positioning (
anchor-name, position-anchor): trial
- Popover API (
[popover], :popover-open): ready-soon
- Customizable Native Select (
appearance: base-select): trial
- Option Checkmark (
::checkmark): trial
- Details Content (
::details-content): ready-soon
- Scroll Markers (
::scroll-marker, :target-current): trial
-
🧱
Default Browser Styles
- Content-Sized Form Controls (
field-sizing): watching
- Better Long-Form Text Wrapping (
text-wrap: pretty): trial
- Hanging Punctuation (
hanging-punctuation): watching
- Font Metric Trimming (
text-box-trim): watching
