v146 · CSS · Feature Detection

named-feature() function for CSS @supports

Chrome 150 adds @supports named-feature("…") — a new condition type for detecting features that can't be probed with existing @supports mechanisms, such as subtle behaviour differences that have no testable property or selector.

concepts

  1. Feature Query Explorer

    Live browser-side evaluation of each @supports condition type — property:value, selector(), at-rule(), and the new named-feature() — all shown with their detection result in this browser.

  2. Progressive Enhancement

    A real layout that uses @supports named-feature("anchor-position-follows-transforms") to opt into a more precise anchor-positioned tooltip, falling back to a simpler approach in browsers that don't support the named feature.

  3. Named feature catalog

    A filterable catalogue of candidate named-feature() tokens. Each row runs live in your browser via CSS.supports() so you can see exactly which named features this build recognises.

  4. Feature Flag Dashboard

    A dashboard that probes multiple named-feature() tokens and conditionally enables UI components based on detection results. Shows the progressive-enhancement use case: each feature-gated UI element switches between "fully enabled" and "fallback" based on what this browser supports.

  5. Upgrade Strategy

    A feature-detection decision tree: for each named feature (and at-rule feature), a live probe determines which implementation strategy to use — ideal vs fallback vs polyfill. Includes a live tooltip demo that switches between position-anchor and absolute positioning based on named-feature("anchor-position-follows-transforms").

why it shipped

CSS @supports has grown a family of condition functions: a property: value pair tests for CSS property support, selector() tests for selector support, and (as of Chrome 148) at-rule() tests for at-rule support. But some browser capabilities are not testable by any of these mechanisms — they depend on implementation behaviour rather than syntax. The initial example is anchor-position-follows-transforms: a feature flag that controls whether anchor-positioned elements track their anchors through CSS transforms. There is no property you can write to test this. named-feature() plugs that gap by letting the spec define a small, curated set of names for high-value, hard-to-detect behaviours. Authors can query for them in exactly the same way as any other @supports condition, including combining them with and, or, and not.

references