v146 · CSS · Progressive Enhancement · demo
Feature Flag Dashboard
A dashboard that runs CSS.supports('named-feature(...)') queries for a set of platform capabilities and uses the results to conditionally enable UI features. When a named feature is supported, the corresponding UI component is fully enabled; otherwise it degrades gracefully. This is the progressive-enhancement use case for named-feature().
Chrome 146+ —
@supports named-feature("...") and CSS.supports(). The dashboard runs in any browser; each row shows whether the feature is detected in this browser.
Each row checks one named feature · green = available in this browser · the lower section shows feature-gated UI elements switching based on detection results
named-feature() probe — this browser
Feature-gated UI — enabled/disabled based on detection results
/* CSS: gate layout on a named feature */
@supports named-feature("anchor-position-follows-transforms") {
.tooltip {
position: absolute;
position-anchor: --button;
top: anchor(bottom);
/* precise anchor tracking available */
}
}
/* Fallback (outside @supports): simpler positioning */
.tooltip { position: absolute; top: 100%; left: 0; }
/* JavaScript: same detection for conditional feature loading */
if (CSS.supports('named-feature("scroll-driven-animations")')) {
enableScrollProgressBar();
} else {
enableJSScrollProgress(); // IntersectionObserver fallback
}