CSS @supports At-Rule
The @supports at-rule conditionally applies CSS when the browser recognizes a specified feature or feature combination. It is useful for progressive enhancement.
@supports Syntax
@supports (display: grid) {
.layout {
display: grid;
grid-template-columns: 1fr 1fr;
}
}A feature query evaluates whether the browser recognizes the tested CSS syntax. When the condition is true, the enclosed rules enter the cascade; when false, they are skipped.
How @supports Works
A successful declaration test does not guarantee that a particular design renders identically in every browser. Place a usable fallback outside the feature query.
The @supports at-rule conditionally applies CSS when the browser recognizes a specified feature or feature combination. It is useful for progressive enhancement.
The @supports rule evaluates a CSS feature query and includes its nested declarations only when the condition is true. It is a progressive-enhancement tool, not a browser-name detector.
Declaration Tests
A declaration test checks whether the browser supports the given property-value combination, not whether a particular layout will look correct.
A declaration query such as @supports (display: grid) tests syntax support. selector() tests whether a selector is recognized, and logical operators can combine conditions.
Logical Operators
Combine tests with not, and, or. Parentheses clarify grouping and are required in many combined conditions.
Selector Tests
The selector() function can test whether a selector syntax is supported: @supports selector(:has(> img)) { ... }.
Progressive Enhancement
Place basic styles outside @supports, then add enhanced styles within the conditional block.
@supports 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>First column</div><div>Second column</div></div>CSS
@supports (display: grid) {
.layout {
display: grid;
grid-template-columns: 1fr 1fr;
}
}Browser Support
Support varies by feature and browser version. For current compatibility, consult Can I Use? and search for the relevant feature.
Write functional baseline styles before @supports. Then add enhancements inside the rule so unsupported browsers retain a usable layout.
Specifications
This feature is described in CSS Conditional Rules Module Level 3.