demo · v143
Progressive CSS
The use case the spec was written for: ship enhanced styling that only applies when the browser supports a specific at-rule, without a JavaScript probe. Two arenas side-by-side — same markup, one wrapped in @supports at-rule(@scope).
Checking
CSS.supports("at-rule(@scope)")…plain (no @supports block)
Article — base styling
Default look without the enhancement.
Article — base styling
Default look without the enhancement.
stamp: base
wrapped in @supports at-rule(@scope)
Article — enhanced via @scope
Green border + bold caption only paint if the @supports block matched.
Article — enhanced via @scope
Green border + bold caption only paint if the @supports block matched.
stamp: dynamic
the CSS
/* Pre-v143: this @supports block was a syntax error in the conditional */
@supports at-rule(@scope) {
.arena.enhanced .card { background: #f1faf4; border-color: green; }
.arena.enhanced .label { color: green; font-weight: 700; }
}
/* The arena renders fine without it — the @supports block is purely additive */
why this angle
This is the design motivation: ship a single stylesheet whose enhanced rules only activate when the at-rule they depend on exists. Before v143 you had to fork via JavaScript (CSS.supports("(scope: foo)")-style hacks or class toggles) — now it's declarative.