Feature Queries

Was, wenn der Browser eine Property nicht kennt?

Media Queries fragen nach der Umgebung (Bildschirmbreite, Präferenzen, …). Feature Queries fragen stattdessen: Kann dieser Browser eine bestimmte CSS-Eigenschaft überhaupt?

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

@supports not (display: grid) {
  .layout {
    float: right; /* Fallback für sehr alte Browser */
  }
}

• @supports (property: wert) prüft, ob der Browser diese Property/diesen Wert versteht
• @supports not (...) ist die Verneinung - praktisch für einen Fallback
• Mehrere Bedingungen lassen sich mit and/or kombinieren, genau wie bei @media

Wann braucht ihr das wirklich?

Hinweis

Die meisten CSS-Features aus diesem Kurs (Grid, Flexbox, clamp(), Container Queries, light-dark()) sind heute Baseline - das heißt: von allen aktuellen Browsern unterstützt. @supports wird vor allem dann wichtig, wenn ihr eine ganz neue, gerade erst verabschiedete CSS-Funktion nutzen wollt und noch nicht sicher seid, ob eure Nutzer*innen sie schon bekommen.

Tipp

Auf caniuse.com und in der MDN-Dokumentation steht bei jeder CSS-Property, seit wann und in welchen Browsern sie unterstützt wird - meistens die schnellere Antwort, statt selbst mit @supports zu testen.

Weitere Quellen

• MDN: @media Media Features
• MDN: @supports