v150 · 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. Compound Condition

    Combine named-feature() with and, or, and not operators in a live query builder. Type any condition in either slot, select the logical operator, and see the compound result evaluated in this browser — plus the generated CSS and whether the demo card gets enhanced styling.

  4. Anchor-position Feature Flag

    The first real-world use of named-feature(): @supports named-feature(anchor-position-follows-transforms). Tests whether this browser's anchor-positioning tracks elements through CSS transforms. Shows the CSS and JavaScript probe forms side by side with live results.

  5. CSSOM Query

    Use CSS.supports() to probe named-feature() from JavaScript. An interactive query builder lets you type any condition string and evaluate it instantly — with preset examples covering named-feature(), selector(), and property probes. A running batch table shows all results in this browser.

  6. named-feature() Registry Catalog

    A live catalog of every known named-feature() name from the CSS Conditional Level 5 spec registry — probed in your browser in real time. Filter by support status, search by keyword, and test arbitrary names via a custom probe. Shows why only officially-registered names can return true and what names are proposed for future additions.

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

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗