demo · v143

at-rule support matrix

A live audit of every interesting at-rule in CSS, probed with CSS.supports("at-rule(@x)"). Filter by category, search by name, or paste your own at-rule to test. Cells flip green / red against your current browser in real time.

probed0
supported0
unsupported0
snippets parsed0
detection works?…

The at-rule probe only accepts an at-keyword. Full snippets are parsed separately in a detached stylesheet.

What this measures

  1. For each at-rule, calls CSS.supports("at-rule(@" + name + ")"). The function takes an at-keyword, not a full at-rule block.
  2. If CSS.supports returns false on a syntactically valid at-rule, the browser doesn't implement it.
  3. The custom full-rule field is a separate parser check. It uses a detached stylesheet and reports whether a descriptor/query snippet parses; it is not the same as at-rule(). Network-capable syntax such as @import and url() is rejected before parsing.
  4. If the function itself returns false on every probe — even widely supported ones — your browser doesn't implement at-rule() as a probe and you should fall back to JS-based detection (e.g. constructing a stylesheet and inspecting cssRules).
// inside CSS:
@supports at-rule(@container) {
  .card { container-type: inline-size; }
}

// inside JS:
if (CSS.supports("at-rule(@scope)")) { /* … */ }

see also