CSS
Funktionsabfragen

Syntax

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

Parameter

Bemerkungen

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) .