@supports checks whether a browser recognizes a CSS declaration. Use it to layer an enhancement over a layout that remains usable without the newer feature.

.card {
  display: block;
}

@supports (display: grid) {
  .card-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  }
}

Feature detection, not browser names

  • Test the exact property and value the enhancement needs.
  • Keep the fallback meaningful rather than hiding important content.
  • Use and / or / not to combine checks when a feature depends on more than one declaration.

Remember that syntax support is not the whole story

A successful supports check tells you the browser parses a declaration; it does not prove every detail works perfectly or that the feature is suitable for the page. Test the actual interaction and keep a sensible fallback.

Use feature queries for enhancements, not as a substitute for checking browser support or for testing a real layout.