@supports

@supports

@supports applies rules only if the browser can parse a (property: value), a selector() (Chrome 83 1 , Firefox 69 555 , Safari 14.1 10 ) or a font-tech()/font-format() test (Chrome 108, Firefox 106, Safari 17), combined with and, or, not. JavaScript asks the same with CSS.supports(). Each badge appears only if its test passes.

Feature queries for declarations, selectors and font technologyHTMLLive

<style>
  span { display: none; font: 16px system-ui; padding: 4px 10px; margin: 4px;
         border-radius: 12px; background: #e8f5e9; color: #2e7d32; }
  @supports (display: grid) and (gap: 1rem) { .grid { display: inline-block; } }
  @supports selector(:has(> img)) { .has { display: inline-block; } }
  @supports font-tech(color-COLRv1) { .colr { display: inline-block; } }
</style>
<span class="grid">grid + gap</span><span class="has">:has()</span><span class="colr">COLRv1</span>

Browser output of Listing 4.27 — Browser output of 27

A feature query tests parsing, not correct behavior. Write the fallback first and the enhancement inside @supports.

MENU