@supports

Probieren Sie es aus

.flex-container > * {
  padding: 0.3em;
  list-style-type: none;
  text-shadow: 0 0 2px red;
  float: left;
}

@supports (display: flex) {
  .flex-container > * {
    text-shadow: 0 0 2px blue;
    float: none;
  }

  .flex-container {
    display: flex;
  }
}

<ul class="flex-container">
  <li><a href="#">Index</a></li>
  <li><a href="#">About me</a></li>
  <li><a href="#">Contact</a></li>
</ul>

In JavaScript kann @supports über die CSS-Objektmodell-Schnittstelle CSSSupportsRule abgerufen werden.

Syntax

@supports (<supports-condition>) {
  /* If the condition is true, use the CSS in this block. */
}

@supports (<supports-condition>) and (<supports-condition>) {
  /* If both conditions are true, use the CSS in this block. */
}

Die @supports at-Regel besteht aus einem Block von Anweisungen mit einer Supports-Bedingung. Die Bedingungen können durch Konjunktionen (and), Disjunktionen (or) und/oder Negationen (not) kombiniert werden. Die Vorfahrt der Operatoren kann mit Klammern definiert werden.

Supports-Bedingungen können entweder die <property>: <value>-Deklaration-Syntax oder die <function()>-Syntax verwenden. Die folgenden Abschnitte beschreiben die Verwendung der jeweiligen Supports-Bedingung.

Deklarationssyntax

Die Deklarationssyntax überprüft, ob ein Browser die angegebene <property>: <value>-Deklaration unterstützt. Die Deklaration muss von Klammern umgeben sein. Das folgende Beispiel gibt true zurück, wenn der Browser den Ausdruck transform-origin: 5% 5% unterstützt:

@supports (transform-origin: 5% 5%) {
}

Funktionssyntax

Die Funktionssyntax überprüft, ob ein Browser Werte oder Ausdrücke innerhalb der Funktion unterstützt. Die in der Funktionssyntax unterstützen Funktionen sind in den folgenden Abschnitten beschrieben.

selector()

Diese Funktion bewertet, ob ein Browser die angegebene Selektorsyntax unterstützt. Das folgende Beispiel gibt true zurück und wendet den CSS-Stil an, wenn der Browser den Child Combinator unterstützt:

@supports selector(h2 > p) {
}

font-tech()

Diese Funktion überprüft, ob ein Browser die angegebene Schrifttechnologie für Layout und Rendering unterstützt. Das folgende Beispiel gibt true zurück und wendet den CSS-Stil an, wenn der Browser die COLRv1-Schrifttechnologie unterstützt:

@supports font-tech(color-COLRv1) {
}

Die folgende Tabelle beschreibt die Schrifttechnologien (<font-tech>), einschließlich Farbfont-Technologien (<color-font-tech>), Schriftmerkmal-Technologien (<font-features-tech>) und andere verfügbare Schrifttechnologien, die mit der Funktion font-tech() abgefragt werden können:

font-format()

Diese Funktion überprüft, ob ein Browser das angegebene Schriftformat für Layout und Rendering unterstützt. Das folgende Beispiel gibt true zurück und wendet den CSS-Stil an, wenn der Browser das opentype-Schriftformat unterstützt:

@supports font-format(opentype) {
}

Die folgende Tabelle beschreibt die verfügbaren Formate (<font-format> Werte), die mit dieser Funktion abgefragt werden können:

Der not-Operator

Der not-Operator geht einem Ausdruck voraus und führt zur Negation des Ausdrucks. Der folgende Ausdruck gibt true zurück, wenn die transform-origin-Eigenschaft des Browsers 10em 10em 10em als ungültig betrachtet:

@supports not (transform-origin: 10em 10em 10em) {
}

Wie bei jedem Operator kann der not-Operator auf eine Deklaration beliebiger Komplexität angewendet werden. Die folgenden Beispiele sind beide gültig:

@supports not (not (transform-origin: 2px)) {
}
@supports (display: grid) and (not (display: inline-grid)) {
}

Der and-Operator

Der and-Operator erstellt einen neuen Ausdruck aus der Konjunktion zweier kürzerer Ausdrücke. Er gibt true zurück, nur wenn beide der kürzeren Ausdrücke ebenfalls wahr sind. Das folgende Beispiel gibt true zurück, wenn und nur wenn die beiden kürzeren Ausdrücke gleichzeitig wahr sind:

@supports (display: table-cell) and (display: list-item) {
}

Mehrere Konjunktionen können ohne die Notwendigkeit weiterer Klammern nebeneinander gestellt werden. Die folgenden sind beide gleichwertig:

@supports (display: table-cell) and (display: list-item) and (display: contents) {
}
@supports (display: table-cell) and
  ((display: list-item) and (display: contents)) {
}

Der or-Operator

Der or-Operator erstellt einen neuen Ausdruck aus der Disjunktion zweier kürzerer Ausdrücke. Er gibt true zurück, wenn einer oder beide der kürzeren Ausdrücke ebenfalls wahr sind. Das folgende Beispiel gibt true zurück, wenn mindestens einer der beiden kürzeren Ausdrücke wahr ist:

@supports (transform-style: preserve) or (-moz-transform-style: preserve) {
}

Mehrere Disjunktionen können ohne die Notwendigkeit weiterer Klammern nebeneinander gestellt werden. Die folgenden sind beide gleichwertig:

@supports (transform-style: preserve) or (-moz-transform-style: preserve) or
  (-webkit-transform-style: preserve) {
}

@supports (transform-style: preserve-3d) or
  (
    (-moz-transform-style: preserve-3d) or
      (-webkit-transform-style: preserve-3d)
  ) {
}

Formale Syntax

@supports = 
  @supports <supports-condition> { <rule-list> }  

<supports-condition> = 
  not <supports-in-parens>                            |
  <supports-in-parens> [ and <supports-in-parens> ]*  |
  <supports-in-parens> [ or <supports-in-parens> ]*   

<supports-in-parens> = 
  ( <supports-condition> )  |
  <supports-feature>        |
  <general-enclosed>        

<supports-feature> = 
  <supports-selector-fn>     |
  <supports-font-tech-fn>    |
  <supports-font-format-fn>  |
  <supports-at-rule-fn>      |
  <supports-decl>            

<general-enclosed> = 
  [ <function-token> <any-value>? ) ]  |
  [ ( <any-value>? ) ]                 

<supports-selector-fn> = 
  selector( <complex-selector> )  

<supports-font-tech-fn> = 
  font-tech( <font-tech> )  

<supports-font-format-fn> = 
  font-format( <font-format> )  

<supports-at-rule-fn> = 
  at-rule( <at-keyword-token> )  

<supports-decl> = 
  ( <declaration> )  

<complex-selector> = 
  <complex-selector-unit> [ <combinator>? <complex-selector-unit> ]*  

<font-tech> = 
  <font-features-tech>  |
  <color-font-tech>     |
  variations            |
  palettes              |
  incremental           

<font-format> = 
  <string>           |
  collection         |
  embedded-opentype  |
  opentype           |
  svg                |
  truetype           |
  woff               |
  woff2              

<complex-selector-unit> = 
  [ <compound-selector>? <pseudo-compound-selector>* ]!  

<combinator> = 
  '>'          |
  '+'          |
  '~'          |
  [ '|' '|' ]  

<font-features-tech> = 
  features-opentype  |
  features-aat       |
  features-graphite  

<color-font-tech> = 
  color-COLRv0  |
  color-COLRv1  |
  color-SVG     |
  color-sbix    |
  color-CBDT    

<compound-selector> = 
  [ <type-selector>? <subclass-selector>* ]!  

<pseudo-compound-selector> = 
  <pseudo-element-selector> <pseudo-class-selector>*  

<type-selector> = 
  <wq-name>         |
  <ns-prefix>? '*'  

<subclass-selector> = 
  <id-selector>            |
  <class-selector>         |
  <attribute-selector>     |
  <pseudo-class-selector>  

<pseudo-element-selector> = 
  : <pseudo-class-selector>         |
  <legacy-pseudo-element-selector>  

<pseudo-class-selector> = 
  : <ident-token>                   |
  : <function-token> <any-value> )  

<wq-name> = 
  <ns-prefix>? <ident-token>  

<ns-prefix> = 
  [ <ident-token> | '*' ]? '|'  

<id-selector> = 
  <hash-token>  

<class-selector> = 
  '.' <ident-token>  

<attribute-selector> = 
  '[' <wq-name> ']'                                   |
  '[' <wq-name> <attr-matcher> [ <string-token> | <ident-token> ] <attr-modifier>? ']'  

<legacy-pseudo-element-selector> = 
  : [ before | after | first-line | first-letter ]  

<attr-matcher> = 
  [ '~' | '|' | '^' | '$' | '*' ]? '='  

<attr-modifier> = 
  i  |
  s  

Beispiele

Testen der Unterstützung einer CSS-Eigenschaft

@supports (animation-name: test) {
  /* CSS applied when animations are supported without a prefix */
  @keyframes {
    /* Other at-rules can be nested inside */
  }
}

Testen der Unterstützung einer bestimmten CSS-Eigenschaft oder einer vorangestellten Version

@supports (text-stroke: 10px) or (-webkit-text-stroke: 10px) {
  /* CSS applied when text-stroke, prefixed or not, is supported */
}

Testen der Nicht-Unterstützung einer bestimmten CSS-Eigenschaft

@supports not ((text-align-last: justify) or (-moz-text-align-last: justify)) {
  /* CSS to provide fallback alternative for text-align-last: justify */
}

Testen der Unterstützung eines Selektors

CSS-Bedingte Regeln bieten die Möglichkeit, die Unterstützung eines Selektors wie :has() zu testen.

/* This rule won't be applied in browsers that don't support :has() */
ul:has(> li li) {
  /* CSS is applied when the :has(…) pseudo-class is supported */
}

@supports not selector(:has(a, b)) {
  /* Fallback for when :has() is unsupported */
  ul > li,
  ol > li {
    /* The above expanded for browsers that don't support :has(…) */
  }
}

/* Note: So far, there's no browser that supports the `of` argument of :nth-child(…) */
@supports selector(:nth-child(1n of a, b)) {
  /* This rule needs to be inside the @supports block, otherwise
     it will be partially applied in browsers which don't support
     the `of` argument of :nth-child(…) */
  :is(:nth-child(1n of ul, ol) a, details > summary) {
    /* CSS applied when the :is(…) selector and
       the `of` argument of :nth-child(…) are both supported */
  }
}

Testen der Unterstützung einer Schrifttechnologie

Das folgende Beispiel wendet die Bungee Spice Farbschrift an, wenn der Browser die COLRv1-Schrifttechnologie unterstützt:

@supports font-tech(color-COLRv1) {
  body {
    font-family: "Bungee Spice", fantasy;
  }
}

Es ist auch möglich, die Unterstützung einer Schrifttechnologie zu testen, indem die tech-Funktion innerhalb der @font-face at-Regel verwendet wird. Im folgenden Beispiel wird, wenn ein Browser die Farbfont-Technologie der bungee-spice.woff2 Schrift nicht unterstützt, stattdessen eine reguläre bungee.woff2 Schrift verwendet.

@font-face {
  font-family: "Bungee Spice";
  src:
    url("bungee-spice.woff2") tech(color-COLRv1) format("woff2"),
    url("bungee.woff2") format("woff2");
}

Testen der Unterstützung eines Schriftformats

Das folgende Beispiel verwendet die WOFF2-Version der Schrift, wenn der Browser dieses Schriftformat unterstützt, andernfalls wird auf die zuvor spezifizierte WOFF-Version zurückgegriffen:

@font-face {
  font-family: "Open Sans WOFF";
  src: url("open-sans.woff") format("woff");
}

@font-face {
  font-family: "Open Sans WOFF2";
  src: url("open-sans.woff2") format("woff2");
}

body {
  font-family: "Open Sans WOFF", sans-serif;
}

@supports font-format(woff2) {
  body {
    font-family: "Open Sans WOFF2", sans-serif;
  }
}

Eine effizientere Möglichkeit, mehrere Schriftformate anzugeben, besteht jedoch darin, sie in der src-Deklaration einer einzelnen @font-face at-Regel in der Reihenfolge vom bevorzugtesten zum am wenigsten bevorzugten Format aufzulisten:

@font-face {
  font-family: "Open Sans";
  src:
    url("open-sans.woff2") format("woff2"),
    url("open-sans.woff") format("woff");
}

body {
  font-family: "Open Sans", sans-serif;
}

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Verwendung von Feature-Abfragen
• CSS at-Regel-Funktionen
• CSSSupportsRule
• CSS.supports() Methode