v148 · CSS · Feature Detection
At-Rule Capability Matrix
Live test of @supports at-rule() across every major modern at-rule. Each row shows the detection query, whether this browser matches it, and a styled element that only appears when the condition is true — so you can see exactly what you can gate.
custom at-rule probe
Run a custom probe to see the exact
CSS.supports('at-rule(@name)') result and the fallback state for invalid input.Live detection results
Each row runs CSS.supports('at-rule(@name)') in JavaScript alongside the matching @supports at-rule(@name) block in CSS.
| At-Rule | JS: CSS.supports() | Description |
|---|
CSS-only feature gates
These boxes are styled only inside @supports at-rule() blocks — no JavaScript. If you see a coloured box, the at-rule is supported in this browser.
@supports at-rule(@starting-style)
@starting-style
@supports at-rule(@starting-style) {
.el { background: var(--accent-emerald); }
}
@supports at-rule(@layer)
@layer
@supports at-rule(@layer) {
.el { background: var(--accent-blue); }
}
@supports at-rule(@property)
@property
@supports at-rule(@property) {
.el { background: var(--text-black); }
}
@supports at-rule(@scope)
@scope
@supports at-rule(@scope) {
.el { background: var(--accent-emerald); }
}
references
implementation reference
Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗