@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 aufgerufen 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-Regel besteht aus einem Block von Anweisungen mit einer supports condition. Die Bedingungen können durch Konjunktionen (and), Disjunktionen (or) und/oder Negationen (not) kombiniert werden. Die Präzedenz der Operatoren kann mit Klammern definiert werden.

Supports-Bedingungen können entweder eine <property>: <value> Deklarationssyntax oder eine <function()>-Syntax verwenden. Die folgenden Abschnitte beschreiben die Verwendung jedes Typs von Supports-Bedingungen.

Deklarationssyntax

Die Deklarationssyntax prüft, ob ein Browser die angegebene <property>: <value>-Deklaration unterstützt. Die Deklaration muss von Klammern umgeben sein. Das folgende Beispiel liefert true, 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ützten Funktionen werden in den folgenden Abschnitten beschrieben.

selector()

Diese Funktion prüft, ob ein Browser die angegebene Selektor-Syntax unterstützt. Das folgende Beispiel liefert true und wendet den CSS-Stil an, wenn der Browser den Kind-Kombinator 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 liefert true und wendet den CSS-Stil an, wenn der Browser die COLRv1-Schrifttechnologie unterstützt:

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

Die nachfolgende Tabelle beschreibt die Schrifttechnologien (<font-tech>), einschließlich Farbfonttechnologien (<color-font-tech>), Schriftmerkmals-Technologien (<font-features-tech>), und andere verfügbare Schrifttechnologien, die mit der font-tech()-Funktion 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 liefert true 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 steht vor einem Ausdruck und negiert diesen. Das folgende Beispiel liefert true, 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 beliebig komplexe Deklaration 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 erzeugt einen neuen Ausdruck durch die Konjunktion zweier kürzerer Ausdrücke. Er liefert nur true, wenn beide der kürzeren Ausdrücke ebenfalls true sind. Das folgende Beispiel liefert true, wenn und nur wenn beide kürzeren Ausdrücke gleichzeitig true sind:

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

Mehrere Konjunktionen können ohne weitere 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 erzeugt einen neuen Ausdruck durch die Disjunktion zweier kürzerer Ausdrücke. Er liefert true, wenn einer oder beide der kürzeren Ausdrücke ebenfalls true sind. Das folgende Beispiel liefert true, wenn mindestens einer der beiden kürzeren Ausdrücke true ist:

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

Mehrere Disjunktionen können ohne weitere 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> | <supports-condition-name> ] )  

<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

Prüfung auf 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 */
  }
}

Prüfung auf Unterstützung einer bestimmten CSS-Eigenschaft oder einer präfixierten Version

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

Prüfung auf Nichtunterstü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 */
}

Prüfung auf Unterstützung eines Selektors

CSS-Bedingungsregeln 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 */
  }
}

Prüfung auf Unterstützung einer Schrifttechnologie

Das folgende Beispiel wendet die Bungee Spice Farb-Schriftart 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 durch die Verwendung der tech-Funktion innerhalb der @font-face-Regel zu testen. Im folgenden Beispiel wird eine reguläre bungee.woff2 Schriftart verwendet, wenn ein Browser die Farbfonttechnologie in der bungee-spice.woff2 Schriftart nicht unterstützt.

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

Prüfung auf Unterstützung eines Schriftformats

Das folgende Beispiel verwendet die WOFF2-Version der Schriftart, wenn der Browser dieses Schriftformat unterstützt, andernfalls fällt es auf die zuvor angegebene WOFF-Version zurück:

@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 darin, sie in der Reihenfolge vom bevorzugten bis zum weniger bevorzugten Format im src-Deskriptor einer einzigen @font-face-Regel 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-Queries
• CSS At-rule Funktionen
• CSSSupportsRule
• CSS.supports() Methode