@supports-reglen

Reglen @supports definerer styling for elementer baseret på funktioner, som browseren understøtter. I denne regel kan du oprette betingelser ved hjælp af logiske operatorer not, and, or.

Syntaks

css@supports betingelse {
  
}

Eksempel

Lad os definere en betingelse om, at hvis din browser understøtter egenskaben display med værdien flex, vises kun afsnittet med den tilsvarende tekst, og skriftfarven vil være lyseblå:

html<p class="yes">Din browser understøtter display: flex.</p>
<p class="no">Din browser understøtter ikke display: flex.</p>

css@supports (display: flex) {
  .no {
    display: none;
  }
  p {
    color: #467CBC;
  }
}
@supports not (display: flex) {
  .yes {
    display: none;
  }
}

Результат:

Se også