A supports parancs

A @supports parancs olyan elemek stílusát határozza meg, amelyek a böngésző által támogatott lehetőségeket veszik figyelembe. E parancsban feltételek hozhatók létre a logikai operátorok not, and, or segítségével.

Szintaxis

css@supports feltétel {
  
}

Példa

Állítsunk be egy feltételt, hogy ha a böngésző támogatja a display tulajdonságot a flex értékkel, akkor csak a megfelelő szöveggel rendelkező bekezdés jelenik meg, miközben a betűszíne kék lesz:

html<p class="yes">A böngészője támogatja a display: flex értéket.</p>
<p class="no">A böngészője nem támogatja a display: flex értéket.</p>

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

Результат:

Lásd még