Die @supports-Regel

Die Regel @supports legt den Stil für Elemente unter Berücksichtigung der vom Browser unterstützten Funktionen fest. In dieser Regel können Bedingungen mit Hilfe der logischen Operatoren not, and und or erstellt werden.

Syntax

css@supports Bedingung {
  
}

Beispiel

Lassen Sie uns eine Bedingung festlegen: Wenn Ihr Browser die Eigenschaft display mit dem Wert flex unterstützt, wird nur der Absatz mit dem entsprechenden Text angezeigt, wobei die Schriftfarbe blau ist:

html<p class="yes">Ihr Browser unterstützt display: flex.</p>
<p class="no">Ihr Browser unterstützt display: flex nicht.</p>

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

Результат:

Siehe auch