v148 · CSS

@supports at-rule()

Detect CSS at-rule support directly in stylesheets. @supports at-rule(@starting-style), @supports at-rule(@layer), @supports at-rule(@property) — feature-gate styles that depend on newer at-rules without JavaScript.

concepts

  1. Feature Detector

    A live detection panel showing which CSS at-rules this browser supports. Each check uses @supports at-rule(…) and reports the result — both from CSS (a visual indicator) and from JavaScript's CSS.supports().

  2. Progressive Enhancement

    A UI component that uses @starting-style for entrance animations when supported — and falls back gracefully in browsers that don't know the at-rule. The detection is done in pure CSS with @supports at-rule(@starting-style).

  3. At-Rule Capability Matrix

    Live detection table running CSS.supports('at-rule(@name)') for every major modern at-rule — @starting-style, @layer, @property, @scope, @container and more — plus CSS-only gated elements that only appear when the condition matches.

  4. Polyfill Loader

    A polyfill registry for 8 modern CSS features — container queries, layers, @scope, nesting, anchor positioning, and more. Each row shows the @supports at-rule() probe result and a "Load polyfill" button. Generate a ready-to-paste loader script that only fetches missing polyfills, plus a live CSS editor to test the detection syntax.

  5. @supports Playground

    Type any at-rule name and get an instant yes/no from this browser via CSS.supports('@rule-name') and CSSStyleSheet injection. A pre-loaded palette covers @layer, @container, @scope, @starting-style, @position-try, and more — all results collected into a growing comparison table.

why it shipped

@supports has long allowed CSS authors to test property support (@supports (display: grid)) and selector support (@supports selector(:has())). But it had a gap: no way to test whether a browser understands a CSS at-rule like @layer, @starting-style, @property, or @scope. Developers had to fall back to JavaScript's CSS.supports(), which only handles property-value pairs, or to browser-detection heuristics. The at-rule() function fills that gap, letting stylesheets self-gate features that depend on at-rules the browser may not understand.

references

implementation reference

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