CSS Feature Queries mit `@supports` verwenden

Feature Queries (Feature-Abfragen) über die @supports-Regel ermöglichen es, im CSS-Code zu prüfen, ob der Browser des Benutzers eine bestimmte CSS-Eigenschaft oder einen bestimmten Wert unterstützt. Dies ist ein fundamentales Werkzeug für das Prinzip des Progressive Enhancement (progressive Verbesserung): Sie können moderne CSS-Features nutzen und gleichzeitig ein stabiles Fallback für ältere Browser bereitstellen.

1. Grundlegende Syntax

Die @supports-Regel verhält sich ähnlich wie eine @media-Query. Sie umschließt einen CSS-Block, der nur angewendet wird, wenn die Bedingung erfüllt ist.

/* Prüft, ob der Browser das CSS Grid Layout unterstützt */
@supports (display: grid) {
  .gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
}

2. Logische Operatoren

Sie können komplexe Abfragen mithilfe der logischen Operatoren not, and und or erstellen.

not (Verneinung)

Definiert ein Fallback für Browser, die ein bestimmtes Feature nicht unterstützen.

@supports not (display: grid) {
  .gallery {
    /* Fallback-Layout mit Floats für ältere Browser */
    float: left;
    width: 33.3%;
  }
}

and (Und-Verknüpfung)

Erfordert, dass alle angegebenen Bedingungen erfüllt sind.

/* Prüft auf Unterstützung von Grid und dem modernen subgrid-Wert */
@supports (display: grid) and (grid-template-rows: subgrid) {
  .gallery-item {
    grid-template-rows: subgrid;
  }
}

or (Oder-Verknüpfung)

Erfordert, dass mindestens eine der Bedingungen erfüllt ist. Dies ist besonders nützlich, um auf herstellerspezifische Präfixe (Vendor Prefixes) zu prüfen.

@supports (display: -webkit-flex) or (display: flex) {
  .navigation {
    display: flex;
  }
}

3. Best Practices

• Progressive Enhancement: Schreiben Sie Ihr Basis-Design so, dass es auf allen Browsern funktioniert (oft ein einfaches, einspaltiges Layout). Verwenden Sie dann @supports, um moderne Features wie Grid oder Flexbox für kompatible Browser hinzuzufügen.
• Klammern sind Pflicht: Die Bedingung innerhalb von @supports muss immer in Klammern stehen (z.B. (display: grid)), da es sich um eine Eigenschaft-Wert-Deklaration handelt.

Fazit

Die @supports-Regel ist ein unverzichtbares Werkzeug für modernes, zukunftssicheres Webdesign. Sie ermöglicht es, neue CSS-Technologien ohne Angst vor Inkompatibilitäten zu implementieren, indem sie eine saubere Weiche für ältere Browser direkt im Stylesheet bereitstellt.