CSS @supports-Regel

Definition und Verwendung

CSS @supports Regeln werden verwendet, um zu testen, ob der Browser eine bestimmte CSS-Funktion unterstützt, und definieren Ersatzstile, wenn dies nicht der Fall ist.

Beispiel

Wird der Browser display: grid unterstützen, wird angewendet @supports CSS innerhalb der Regeln. Wird nicht unterstützt, wird angewendet @supports Stile der Klasse .container außerhalb der Regeln:

/* Wenn der Browser display: grid nicht unterstützt, wird dieser CSS verwendet */
.container {
  display: table;
  width: 90%;
  background-color: #2196F3;
  padding: 10px;
}
/* Wenn der Browser display: grid unterstützt, wird dieser CSS verwendet */
@supports (display: grid) {
  .container {
    display: grid;
    grid: auto;
    grid-gap: 10px;
    background-color: #2196F3;
    padding: 10px;
  }
}

Probieren Sie es selbst aus

CSS-Syntax

@supports (supports-condition) {
  /* Wenn die Bedingung wahr ist, wird dieser CSS angewendet */
}

Attributswert

Wert Beschreibung
supports-condition

Bedingungen werden als Name-Wert-Paar (property: value) oder function() Syntax dargestellt.

Bedingungen können mit and, or oder not kombiniert werden.
selector()

ist die function() Syntax. Überprüft, ob der Browser die angegebene Selector-Syntax unterstützt.

Zum Beispiel, @supports selector(h2 > p), wenn der Browser Subkompositoren unterstützt, wird true zurückgegeben und der CSS-Style angewendet.
font-tech()

ist die function() Syntax. Überprüft, ob der Browser die angegebene Schrifttechnologie unterstützt.

Zum Beispiel, @supports font-tech(color-svg), wenn der Browser SVG-Mehrfarbenschemata unterstützt, wird true zurückgegeben und der CSS-Style angewendet.
font-format()

ist die function() Syntax. Überprüft, ob der Browser die angegebene Schriftart unterstützt.

Zum Beispiel, @supports font-format(woff), wenn der Browser WOFF 1.0 unterstützt, wird true zurückgegeben und der CSS-Style angewendet.

Browser-Unterstützung

Die Zahlen in der Tabelle stellen die Versionsnummer des ersten Browsers dar, der diese @ Regeln vollständig unterstützt.

@ Regeln Chrome Edge Firefox Safari Opera
@supports 28 12 22 9 12.1
font-format() 108 108 106 17 94
font-tech() 108 108 106 17 94
selector() 83 83 69 14.1 69