v148 · CSS · Feature Detection
@supports Playground
Chrome 148 adds @supports at-rule(@name) to detect CSS at-rule support. Type any at-rule name and see live whether this browser supports it, or pick from the quick-test palette covering @layer, @container, @starting-style, @scope, and more. All tests run synchronously via CSS.supports('at-rule(@name)') and CSSStyleSheet parsing.
Test an at-rule
Results
at-rule
@supports result
method
Type an at-rule name and click Test — or pick from the quick palette below the input.
/* Chrome 148: @supports at-rule(@name) detects at-rule support */
@supports at-rule(@layer) {
/* styles that use @layer — only applied if @layer is supported */
@layer base { ... }
}
@supports at-rule(@container) {
/* safe to use container queries inside this block */
@container (width > 600px) { ... }
}
@supports at-rule(@scope) {
@scope (.card) { ... }
}
/* Works in JavaScript via CSS.supports() too */
const supportsLayer = CSS.supports('at-rule(@layer)'); // true/false
see also
- Feature Detector — detect CSS property support
- Progressive Enhancement — layered CSS patterns
- Capability Matrix — full at-rule support table
- Polyfill Loader — dynamic polyfill loading
- ChromeStatus entry
- CSS Conditional Rules Level 5 spec
implementation reference
Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗