v150 · CSS · Feature Detection

Compound Condition

@supports named-feature(…) can be combined with and, or, and not — just like any other @supports condition. Build a compound query below and see the evaluated result, the generated CSS, and whether the demo card gets the enhanced treatment.

live feature status in this browser

compound @supports query builder
@supports
—
and
—
@supports result: evaluating…
/* generated query will appear here */
This card uses the fallback styling — the @supports compound condition evaluated to false (or hasn't been run yet).
condition: not met

code

/* Compound @supports using named-feature() and regular conditions */

/* and: both must be true */
@supports named-feature(anchor-position-follows-transforms) and (anchor-name: --x) {
  .tooltip { /* precision anchor tooltip */ }
}

/* or: either is enough */
@supports named-feature(my-feature) or (my-property: value) {
  .element { /* enhanced if either is supported */ }
}

/* not: negate a named-feature condition */
@supports not named-feature(old-behaviour) {
  .element { /* enhanced only on newer browsers */ }
}

/* Can also combine with selector() */
@supports named-feature(anchor-position-follows-transforms)
       and selector(:popover-open) {
  /* Only if both anchor transform tracking AND :popover-open are supported */
}

see also

implementation reference

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