named-feature() function for CSS @supports

at a glance

why it exists

@supports can test property-value pairs (@supports (display: grid)), selectors (@supports selector(:has())), and at-rule conditions (@supports at-rule(@layer)). But some CSS behaviours don't have a natural property-value encoding:

• align-content on block-level boxes is a distinct behaviour from align-content on flex or grid containers. Writing @supports (align-content: stretch) passes in browsers that only support it on flex/grid, giving a false positive.
• Behavioural changes like new cascade rules, new pseudo-class interaction semantics, or new default handling may not correspond to any property-value test.

The named-feature() function provides a curated, specification-controlled list of keyword identifiers that authors can test. Browsers that understand a named feature report true; others fall through to the unsupported path without false positives.

syntax

@supports named-feature( <ident> ) {
  /* Declarations applied when the named feature is supported */
}

The <ident> is a keyword registered in the CSS Conditional Rules Level 5 specification. Only CSS WG-specified identifiers are valid; authors cannot invent arbitrary names. Unknown identifiers evaluate to false.

The function composes with and, or, and not exactly like other @supports conditions:

@supports named-feature(align-content-on-display-block)
          and (display: grid) {
  /* requires both */
}

current named feature

As of Chrome 150 the specification defines one named feature:

examples

progressive enhancement for align-content on block boxes

/* Fallback: standard block layout */
main {
  display: block;
}

/* Enhancement only if the engine supports align-content on blocks */
@supports named-feature(align-content-on-display-block) {
  main {
    min-height: min-content;
    align-content: stretch;
  }
}

Without named-feature(), the only alternative is to test a property-value pair that evaluates to true in old engines but means something different — a false positive that applies styles unintentionally.

combining with other supports conditions

@supports named-feature(align-content-on-display-block) or (display: flex) {
  .container {
    align-content: center;
  }
}

browser support

see also

• CSS Conditional Rules Level 5 — named-feature()
• csswg-drafts — named-feature explainer
• MDN: @supports
• chromestatus.com — named-feature() for CSS @supports (5153932394102784)