v143 · css

at-rule: CSS Feature Detection

This feature adds an `at-rule()` function to CSS `@supports` which enables authors to feature-detect support for CSS at-rules.

concepts

  1. @supports for at-rules

    Live probe: pick an at-rule and see what CSS.supports("at-rule(@x)") returns in this browser, plus a battery of common at-rules tested in one shot.

  2. Progressive CSS

    The real use case: ship enhanced styling that only paints when the browser supports an at-rule — purely declarative, no JavaScript class toggles. Live before/after.

  3. at-rule support matrix

    A live grid of every interesting at-rule probed with CSS.supports("at-rule(@x)") in your browser, filterable by category, with a custom probe input for testing unusual at-rules including style queries.

  4. Custom At-Rule Builder

    A preset gallery of seven at-rules with individual "Check support" buttons that call CSS.supports("at-rule(@name)") live. A checkbox-based snippet generator outputs @supports at-rule(…) wrapper pairs, and a live CSS editor injects the rule into a real <style> tag so you can see the rendered result immediately.

  5. CSS Upgrade Path

    A live audit of 12 at-rules probed with CSS.supports("at-rule(@x)"), plus a card component that progressively enhances through 5 levels — each layer gated on @layer, @container, @property, @scope, and @starting-style support. Green pips show which levels are active in your browser.

why it shipped

Feature detection is a W3C TAG design principle and a tool that Web authors rely on for graceful degradation of their pages. Currently, the only way for web developers to detect support for CSS at-rules is to use JavaScript. This feature allows at-rule support to be detected using the same `@supports` feature used to detect support for CSS properties.

references