@supports

.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 auf @supports über die CSS-Objektmodell-Schnittstelle CSSSupportsRule zugegriffen werden.

Die @supports at-rule besteht aus einem Anweisungsblock mit einer supports-Bedingung. Die supports-Bedingung ist eine Reihe von einem oder mehreren Namens-Werte-Paaren (z.B. <property>: <value>).

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

Die Bedingungen können durch Konjunktionen (and), Disjunktionen (or) und/oder Negationen (not) kombiniert werden.

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

Die Priorität der Operatoren kann mit Klammern festgelegt 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.

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 wahr zurück, wenn der Browser den Ausdruck transform-origin: 5% 5% unterstützt:

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

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 bewertet, ob ein Browser die angegebene Selektorsyntax unterstützt. Das folgende Beispiel gibt wahr zurück 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 gibt wahr 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 Farbschrifttechnologien (<color-font-tech>), Schriftfeature-Technologien (<font-features-tech>) und weitere 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 wahr 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 steht vor einem Ausdruck und führt zur Negation des Ausdrucks. Das folgende Beispiel gibt wahr 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 erstellt einen neuen Ausdruck aus der Konjunktion von zwei kürzeren Ausdrücken. Er gibt nur dann wahr zurück, wenn beide kürzeren Ausdrücke ebenfalls wahr sind. Das folgende Beispiel gibt wahr 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 nebeneinander gestellt werden, ohne dass zusätzliche Klammern erforderlich sind. 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 erstellt einen neuen Ausdruck aus der Disjunktion von zwei kürzeren Ausdrücken. Er gibt wahr zurück, wenn einer oder beide der kürzeren Ausdrücke ebenfalls wahr sind. Das folgende Beispiel gibt wahr 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 nebeneinander gestellt werden, ohne dass zusätzliche Klammern erforderlich sind. 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))) {}

@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-decl>  

<supports-decl> = 
  ( <declaration> )  

CSS-Bedingungsregeln ermöglichen es, 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 */
  }
}

Das folgende Beispiel wendet den CSS-Stil an, wenn der Browser die COLRv1 Schrifttechnologie unterstützt:

@import url("https://fonts.googleapis.com/css2?family=Bungee+Spice");

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

Es ist auch möglich, die Unterstützung einer Schrifttechnologie zu testen, indem die tech-Funktion innerhalb der @font-face at-rule verwendet wird. Wenn ein Browser die Schrifttechnologie nicht unterstützt, kann eine Ersatzschrift (Bungee-fallback.otf) verwendet werden.

@font-face {
  font-family: "Bungee Spice";
  src:
    url("https://fonts.googleapis.com/css2?family=Bungee+Spice")
      tech(color-COLRv1),
    url("Bungee-fallback.otf") format("opentype");
}

Das folgende Beispiel wendet den CSS-Stil an, wenn der Browser das woff2 Schriftformat unterstützt:

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

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