CSS @supports Tester

Paste any CSS @supports condition and see whether the current browser matches it. The page probes each sub-condition independently via CSS.supports() so you can see exactly which arm of an and or or is firing — and which one isn't. Live preview of how the browser would resolve display: grid, :has(), aspect-ratio, container queries, and every other modern feature. Pure client-side, no upload.

Wrap each sub-condition in its own parentheses. Use and / or / not as usual. Function-call forms: selector(:has(a)), font-tech(opentype), font-format(woff2).

Verdict —
Canonical form —

—

Sub-conditions

Each leaf is tested independently against CSS.supports(). Hover a card to see the raw probe string the browser receives.

  1. No sub-conditions parsed yet.

Reference probes

Click any row to load the probe into the input above. Use these to test the @supports grammar's four leaf forms (declaration, selector(), font-tech(), font-format()) without typing them from scratch.

Kind Probe What it tests This browser
About the grammar

The @supports condition grammar is defined in the CSS Conditional Rules Level 3 spec. 

supports-condition  = not supports-in-parens
                     | supports-in-parens [ and supports-in-parens ]*
                     | supports-in-parens [ or  supports-in-parens ]*

supports-in-parens  = ( supports-condition )
                    | ( declaration )
                    | selector( complex-selector )
                    | font-tech( font-tech-ident# )
                    | font-format( font-format-ident# )

not binds tightest, then and, then or. font-tech tests font rendering technology (COLRv1, variations, OpenType) and font-format tests file formats (woff2, truetype). Both are rare in everyday work; the declaration and selector() forms cover ~99 % of production use.