v150 · CSS · demo

Feature Query Explorer

All four @supports condition types — property:value, selector(), at-rule(), and the new named-feature() — evaluated live in this browser. Green = supported, red = not supported.

@supports condition family

@supports (property: value) Chrome 28 — CSS property/value test
@supports selector() Chrome 83 — CSS selector support test
@supports font-tech() Chrome 101 — font technology test
@supports font-format() Chrome 101 — font format test
@supports at-rule() Chrome 148 — CSS at-rule support test
@supports named-feature() Chrome 150 — named behaviour feature test ← new 
/* @supports named-feature() — Chrome 150 */
@supports named-feature(anchor-position-follows-transforms) {
  /* anchor-positioned elements track their anchor
     through CSS transforms in this browser */
  .tooltip {
    position: absolute;
    position-anchor: --my-anchor;
    top: anchor(bottom);
  }
}

/* Combine with existing @supports conditions */
@supports (position: absolute) and named-feature(anchor-position-follows-transforms) {
  /* safe to use transform-tracked anchor positioning */
}

/* Negate it */
@supports not named-feature(anchor-position-follows-transforms) {
  /* fallback for browsers without the named feature */
}

see also

implementation reference

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