CSS/@-Regeln/@supports

Mit der feature query @supports teilen Sie Browsern mit, dass enthaltene Regeln nur angewendet werden sollen, wenn der Browser eine bestimmte Eigenschaft oder den Wert einer Eigenschaft beherrscht.

Browserunterstützung
caniuse.com

Die Regel besteht aus dem einleitenden Schlüsselwort @supports, gefolgt von einer zu prüfenden Bedingung. Diese Bedingung setzt sich aus Feature-Prüfungen zusammen, die durch die boolesche Operatoren AND, OR und NOT zu komplexeren Prüfungen zusammengesetzt werden können. Hinter der Feature-Bedingung folgen in geschweiften Klammern die CSS Regeln, die gültig sein sollen, wenn die Feature-Bedingung zutrifft.

Formal beschrieben sieht das so aus:

• Eine @supports-Bedingung ist:
  • Eine Teilbedingung
  • Eine Teilbedingung, gefolgt von AND oder OR, gefolgt von einer Teilbedingung
  • NOT, gefolgt von einer Teilbedingung
• Eine Teilbedingung ist:
  • Eine geschachtelte Bedingung: ( @supports-Bedingung )
  • Eine Eigenschaftsabfrage: ( CSS-Eigenschaftsdeklaration )
  • Eine funktionale Featureabfrage: selector(selector), font-format(formatname) oder font-tech(techname)

Beachten Sie:

• Rechts von einem booleschen Operator muss eine Leerstelle stehen, weil der CSS Parser sie sonst mit einem Funktionsausdruck verwechseln würde. Zwischen einer schließenden Klammer und einem booleschen Operator ist keine Leerstelle erforderlich.
• Die Regeln zur Verwendung des NOT-Operators sind enger gefasst als in Programmiersprachen. Folgen Sie strikt der formalen Beschreibung.

Zwei Beispiele sollen die Regeln für NOT verdeutlichen:

Falsch

@supports not (padding-inline:0) and (padding-left:0) { ... }

Warum? Auf NOT muss eine Teilbedingung folgen. Ein AND-Ausdruck ist aber eine @supports-Bedingung. Alternative Begründung: Vor AND muss eine Teilbedingung stehen. Ein NOT-Ausdruck ist aber eine @supports-Bedingung.

@supports (not (padding-inline:0) and (padding-left:0)) { ... }

Warum? Klammern der gesamten Bedingung ändert nichts, es bleibt der gleiche Fehler.

Richtig

Es gibt zwei Möglichkeiten, je nach gewünschter Logik

@supports not ((padding-inline:0) and (padding-left:0)) { ... }

@supports (not (padding-inline:0)) and (padding-left:0) { ... }

Falsch

@supports (padding-inline:0) and not (padding-left:0) { ... }

Warum? Hinter AND muss eine Teilbedingung stehen. Ein NOT-Ausdruck ist aber eine @supports-Bedingung.

Richtig

@supports (padding-inline:0) and (not (padding-left:0)) { ... }

Featureabfrage, ob Grid Layout unterstützt wird

div > * {
  display: inline-block;
}
@supports (display: grid) {
  div {
    display: grid;
  }
}

Für Browser, die die Eigenschaft display:grid unterstützen, wird das div zum Grid-Container. Browser, die grid nicht kennen, ordnen alle Kindelemente des div (die Rasterelemente) durch display:inline-block nebeneinander an.

Browser, die @supports nicht kennen, ignorieren den gesamten auf die Regel folgenden Block, unabhängig davon, ob dort Deklarationen verankert sind, die sie umsetzen könnten.

Beachten Sie: Prüfen Sie, ob Browser, für die Sie eigene CSS-Regeln erstellen möchten (meist wird es sich um ältere Browser handeln), die @supports-Regel unterstützen.

Beispiel

@supports not (display: grid) {
  div > * {
   display: inline-block;
  }
}

Diese Regel kommt etwa im IE11 nicht zur Anwendung, was zu unerwünschten Darstellungen führen kann.