Suche…


Syntax

  • @supports [Bedingung] {/ * CSS-Regeln zum Anwenden von * /}

Parameter

Parameter Einzelheiten
(property: value) Wertet true aus, wenn der Browser die CSS-Regel verarbeiten kann. Die Klammern um die Regel sind erforderlich.
and Gibt nur dann true zurück, wenn sowohl die vorherige als auch die nächste Bedingung erfüllt sind.
not Negiert die nächste Bedingung
or Gibt true zurück, wenn entweder die vorherige oder die nächste Bedingung wahr ist.
(...) Gruppen bedingungen

Bemerkungen

Die Funktionserkennung mit @supports wird in Edge, Chrome, Firefox, Opera und Safari 9 und @supports unterstützt.

Grundlegende Verwendung von @supports

@supports (display: flex) {
  /* Flexbox is available, so use it */
  .my-container {
    display: flex;
  }
}

In der Syntax ist @supports sehr ähnlich zu @media , aber anstelle von Bildschirmgröße und -ausrichtung @supports , ob der Browser eine bestimmte CSS-Regel verarbeiten kann.

@supports (flex) , dass die Regel nicht @supports (display: flex) ist, @supports (display: flex) .

Erkennungsfunktion für Verkettungsfunktionen

Verwenden Sie den Operator and um mehrere Features gleichzeitig zu erkennen.

@supports (transform: translateZ(1px)) and (transform-style: preserve-3d) and (perspective: 1px) {
  /* Probably do some fancy 3d stuff here */
}

Es gibt auch einen or Operator und einen not Operator:

@supports (display: flex) or (display: table-cell) {
  /* Will be used if the browser supports flexbox or display: table-cell */
}
@supports not (-webkit-transform: translate(0, 0, 0)) {
  /* Will *not* be used if the browser supports -webkit-transform: translate(...) */
}

@supports für das ultimative @supports Erlebnis, logische Ausdrücke mit Klammern zu gruppieren:

@supports ((display: block) and (zoom: 1)) or ((display: flex) and (not (display: table-cell))) or (transform: translateX(1px)) {
  /* ... */
}

Dies funktioniert, wenn der Browser

  1. Unterstützt die display: block AND zoom: 1 oder
  2. Unterstützt display: flex UND NICHT display: table-cell oder
  3. Unterstützt transform: translateX(1px) .


Modified text is an extract of the original Stack Overflow Documentation
Lizenziert unter CC BY-SA 3.0
Nicht angeschlossen an Stack Overflow