CSS/@-Regeln/@supports

Aus SELFHTML-Wiki
< CSS‎ | @-Regeln
Wechseln zu: Navigation, Suche

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.

  • CSS 3.0
  • Chrome
  • Firefox
  • Edge
  • Opera
  • Safari

Details: caniuse.com

Die Regel besteht aus einem einleitenden @supports gefolgt von beliebig vielen in runden Klammern durch boolsche Operatoren (AND, OR und NOT) verknüpfte syntaktisch korrekte CSS-Deklarationen. Anschließend folgen in geschweiften Klammern die entsprechenden Deklarationen.

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.