CSS @supports-condition At-Rule
A supports condition is the expression evaluated by @supports or CSS.supports(). It is a CSS grammar construct, not a standalone @supports-condition at-rule.
@supports-condition Syntax
@supports (display: grid) and (gap: 1rem) {
.layout {
display: grid;
gap: 1rem;
}
}A supports condition is the expression inside @supports or a related feature-query context, not an independent @supports-condition rule.
How @supports-condition Works
Combine parenthesized declaration tests with and, or, or not according to the feature-query grammar. Test actual feature syntax rather than browser names.
A supports condition is the expression evaluated by @supports or CSS.supports(). It is a CSS grammar construct, not a standalone @supports-condition at-rule.
A supports condition is the expression following @supports, not a separate at-rule named @supports-condition. It tests declaration support, selector support, or combinations of feature queries.
Not a Standalone At-Rule
Do not write @supports-condition { ... }. Use @supports followed by a condition.
Parenthesized declaration tests can be combined with not, and, or. Use explicit parentheses when combining logical operators so the condition is unambiguous.
Condition Syntax
Feature tests can be combined with and, or, and not. Use parentheses around individual tests.
Testing Selectors
A supports condition can include selector() to test selector syntax.
JavaScript Equivalent
CSS.supports("display", "grid") tests a declaration, while CSS.supports("(display: grid)") evaluates a condition string.
@supports-condition Example
Check current browser support before using this feature in production, and keep a usable fallback where support is unavailable.
HTML
<div class="layout"><div>Item one</div><div>Item two</div></div>CSS
@supports (display: grid) and (gap: 1rem) {
.layout {
display: grid;
gap: 1rem;
}
}Important: This is a reference entry for a supports-condition grammar term, not a separately recognized CSS at-rule.
Browser Support
Support varies by feature and browser version. For current compatibility, consult Can I Use? and search for the relevant feature.
A successful feature query confirms that the browser accepts the tested syntax, not that a particular visual result is guaranteed.
Specifications
The supports condition is specified as part of the @supports syntax; it is not a standalone at-rule.