@supports CSS at-rule

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>

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 Anweisungsblock mit einer Supports-Bedingung. Die Bedingungen können durch Konjunktionen (and), Disjunktionen (or) und/oder Negationen (not) kombiniert werden. Die Operatorpriorität kann mit Klammern festgelegt werden.

Supports-Bedingungen können entweder eine Deklarationssyntax <property>: <value> oder eine Syntax <function()> verwenden. In den folgenden Abschnitten wird die Verwendung jedes Typs von Supports-Bedingung beschrieben.

Deklarationssyntax

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

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

Funktionssyntax

Die Funktionssyntax prüft, ob ein Browser Werte oder Ausdrücke innerhalb der Funktion unterstützt. Die von der Funktionssyntax unterstützten Funktionen werden in den folgenden Abschnitten beschrieben.

at-rule()

Diese Funktion prüft, ob ein Browser die angegebene At-Regel unterstützt. Das folgende Beispiel ergibt true und wendet die enthaltenen CSS-Stile an, wenn der Browser die @keyframes-At-Regel unterstützt:

@supports at-rule(@keyframes) {
}

selector()

Diese Funktion wertet aus, ob ein Browser die angegebene Selektorsyntax unterstützt. Das folgende Beispiel ergibt true und wendet die enthaltenen CSS-Stile an, wenn der Browser den Kind-Kombinator unterstützt:

@supports selector(h2 > p) {
}

font-tech()

Diese Funktion prüft, ob ein Browser die angegebene Schrifttechnologie für Layout und Rendering unterstützt. Das folgende Beispiel ergibt true und wendet die enthaltenen CSS-Stile an, wenn der Browser die Schrifttechnologie COLRv1 unterstützt:

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

Die folgende Tabelle beschreibt die Schrifttechnologien (<font-tech>), einschließlich Farb-Schrifttechnologien (<color-font-tech>), Schriftfunktions-Technologien (<font-features-tech>) sowie anderer verfügbarer Schrifttechnologien, die mit der Funktion font-tech() abgefragt werden können:

font-format()

Diese Funktion prüft, ob ein Browser das angegebene Schriftformat für Layout und Rendering unterstützt. Das folgende Beispiel ergibt true und wendet die enthaltenen CSS-Stile an, wenn der Browser das Schriftformat opentype 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:

named-feature()

Diese Funktion akzeptiert ein vordefiniertes Schlüsselwort und wertet aus, ob ein Browser die angegebene benannte Funktion unterstützt. Dies ermöglicht die Prüfung der Funktionsunterstützung, die nicht mit den anderen @supports-Funktionen getestet werden kann.

@supports named-feature(anchor-position-follows-transform) {
}

anchor-position-follows-transforms

Diese named-feature() prüft, ob der Browser transformationsbewusste Ankerpositionierung unterstützt.

single-axis-scroll-container

Diese named-feature() prüft, ob der Browser einachsige Scroll-Container unterstützt, bei denen eine Achse entweder scroll, auto oder hidden und die andere clip ist.

Der Operator not

Der Operator not steht vor einem Ausdruck und negiert dessen Ergebnis. Das Folgende ergibt true, wenn die Eigenschaft transform-origin des Browsers 10em 10em 10em als ungültig betrachtet:

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

Wie jeder Operator kann auch der Operator not 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 Operator and

Der Operator and erstellt aus der Konjunktion zweier kürzerer Ausdrücke einen neuen Ausdruck. Er ergibt nur dann true, wenn beide kürzeren Ausdrücke ebenfalls true ergeben. Das folgende Beispiel ergibt genau dann true, wenn die beiden kürzeren Ausdrücke gleichzeitig true sind:

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

Mehrere Konjunktionen können ohne zusätzliche Klammern aneinandergereiht werden. Die folgenden Ausdrücke sind äquivalent:

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

Der Operator or

Der Operator or erstellt aus der Disjunktion zweier kürzerer Ausdrücke einen neuen Ausdruck. Er ergibt true, wenn einer oder beide der kürzeren Ausdrücke ebenfalls true ergeben. Das folgende Beispiel ergibt 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 zusätzliche Klammern aneinandergereiht werden. Die folgenden Ausdrücke sind äquivalent:

@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-named-feature-fn>  |
  <supports-env-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-named-feature-fn> = 
  named-feature( <ident> )  

<supports-env-fn> = 
  env( <ident> )  

<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> = 
  '>'                |
  '+'                |
  '~'                |
  [ '|' '|' ]        |
  [ / <wq-name> / ]  

<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>*  

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

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

<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 Version mit Präfix

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

Testen der 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 */
}

Testen der Unterstützung eines Selektors

Bedingte CSS-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 Farb-Schriftart Bungee Spice an, wenn der Browser die Schrifttechnologie COLRv1 unterstützt:

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

Es ist auch möglich, die Unterstützung einer Schrifttechnologie mithilfe der Funktion tech innerhalb der @font-face-At-Regel zu testen. Wenn ein Browser im folgenden Beispiel die Farb-Schrifttechnologie in der Schriftart bungee-spice.woff2 nicht unterstützt, wird stattdessen eine reguläre Schriftart bungee.woff2 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 Schriftart, wenn der Browser dieses Schriftformat unterstützt; andernfalls wird auf die zuvor angegebene 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 Methode zum Angeben mehrerer Schriftformate besteht jedoch darin, sie im Deskriptor src 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;
}

Testen der Unterstützung einer At-Regel

Das folgende Beispiel wendet einen Satz bereichsbezogener Farb-Schema-Stile an, wenn der Browser die @scope-At-Regel unterstützt:

@supports at-rule(@scope) {
  @scope (.light-scheme) {
    :scope {
      background-color: plum;
    }

    a {
      color: darkmagenta;
    }
  }

  @scope (.dark-scheme) {
    :scope {
      background-color: darkmagenta;
      color: antiquewhite;
    }

    a {
      color: plum;
    }
  }
}

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Verwendung von Feature Queries
• CSS-At-Regel-Funktionen
• CSSSupportsRule
• Methode CSS.supports()