Codectionary / Developer documentation / CSS

Progressive Enhancement with @supports

@supports tests whether the browser accepts a CSS declaration or supported selector syntax. It allows enhanced styles to accompany a simpler fallback. A successful feature query confirms recognized syntax, not that a feature is free from bugs or suitable for every accessibility need.

Syntax

@supports (display: grid) { .cards { display: grid; } }

Examples

Progressive Enhancement with @supports: working example

Run this CSS against the example’s own HTML. The explanation describes the expected result.

/* Neutral page for this self-contained document. */
body { color: #182338; background: #fff; }

.cards { display: block; }
.cards article { padding: 1rem; border: 1px solid; }
@supports (display: grid) {
  .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
}
  1. Expected result: Supporting browsers show three equal columns; engines without Grid support retain stacked cards.
  2. The unconditional block layout is the fallback.
  3. The feature query encloses only the enhancement so the underlying content is always available.
HTML used by this example

<div class="cards"><article>One</article><article>Two</article><article>Three</article></div>

Best practices

  • Write a usable fallback before adding the query.
  • Test behavior on target browsers instead of treating parsing support as a complete compatibility test.

Runtime & versions

Web browsers. Feature availability depends on the language and runtime version used by your project; consult the official reference below.

CSS specifications (modules)

Specifications & further reading