CSS @supports: layer a feature over a usable base

How the rule works

A compact case card starts as a simple block so its content remains in normal flow. Where grid is supported, it can align the status beside the summary. The feature query is not permission to hide the base content; it should only add presentation. Test the fallback in a browser without the feature or by removing the enhanced rule, then check long labels at zoom. Some modern CSS features are widely supported enough that a query adds noise; use it where the fallback is materially different or the supported browser set demands it.

.case-card { display: block; padding: 1rem; }
@supports (display: grid) {
  .case-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .75rem; }
}

Cost and verification

The query adds little runtime cost but another path to test. If a browser understands display:grid while missing some other property inside the block, this condition does not protect that property. Test the exact feature whose absence would break the design. Keep the DOM sequence meaningful in both paths, and avoid writing two unrelated layouts that drift apart as content changes.

Common Mistakes

• Do not treat @supports as a full browser compatibility test.
• Do not hide important content in the base style.
• Do not add a query around every mature property without a reason.

Connected lessons

• Responsive CSS
• CSS grid tracks: reserve a sidebar without letting content widen the page
• CSS media queries: change layout at a content failure point
• CSS container queries: adapt a component to its own space

Related component decisions

• CSS @supports selector(): gate a relational selector safely