@supports
Applies rules only if the browser supports a given property, value or selector.
Syntax
@supports (property: value) { … }Parameters
| Parameter | Type | Description |
|---|---|---|
| (property: value) | condition | A declaration to test. |
| not | and | or | keyword | Combine conditions. |
| selector() | function | Tests support for a selector. |
Examples
Styles only where backdrop-filter works:
<style>
.box { padding: 12px; background: lightgray; }
@supports (backdrop-filter: blur(4px)) {
.box { background: palegreen; }
.box::after { content: " — backdrop-filter is supported"; }
}
</style>
<div class="box">Check</div>Testing a selector:
<style>
.msg::after { content: "no :has()"; color: crimson; }
@supports selector(:has(a)) {
.msg::after { content: ":has() is supported"; color: seagreen; }
}
</style>
<p class="msg"></p>Notes
This is the tool for progressive enhancement: write a version that works everywhere, then improve it inside @supports. An unknown property inside an ordinary rule is simply ignored, so @supports is needed only when several declarations must change together.
See also
- @media — Applies rules only under given conditions — the window width, the system theme and others.
- @container — Applies rules depending on the size of a container rather than the window.
- backdrop-filter — Applies filters to everything behind the element — the frosted glass effect.
Related recipes
In the tutorial
- Feature queries: @supports — The @supports rule and feature queries, the not, and and or conditions, checking selectors with selector() and progressive enhancement.