css mit Adi Prinz

Grundlagen

Mit der CSS-Regel @supports kann geprüft werden, ob ein Browser eine bestimmte CSS-Eigenschaft oder einen bestimmten Wert unterstützt. Solche Abfragen werden als Feature Queries bezeichnet.

Die CSS-Regeln innerhalb von @supports werden nur angewendet, wenn die angegebene Bedingung erfüllt ist.

@supports (display: grid) {
  .container {
    display: grid;
  }
}

In diesem Beispiel wird display: grid nur verwendet, wenn der Browser CSS Grid unterstützt.

Fallback-Styles festlegen

Vor der Feature Query können grundlegende CSS-Regeln als Rückfalllösung definiert werden. Diese sogenannten Fallback-Styles gelten auch in Browsern, welche die abgefragte Funktion nicht unterstützen.

.container {
  display: block;
}

@supports (display: grid) {
  .container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
  }
}

Unterstützt der Browser CSS Grid, wird das Grid-Layout verwendet. Andernfalls bleibt display: block aktiv.

Syntax von @supports

Die zu prüfende Deklaration wird in runden Klammern angegeben. Sie besteht aus einer CSS-Eigenschaft und dem dazugehörigen Wert.

@supports (eigenschaft: wert) {
  /* CSS-Regeln */
}

Es wird nur geprüft, ob der Browser die Schreibweise der Deklaration unterstützt. @supports prüft nicht, ob das damit erzeugte Layout für eine bestimmte Bildschirmgröße geeignet ist.