CSS-Bedingungen mit der neuen if()-Funktion

Una Kravets

Veröffentlicht: 1. Juli 2025

Ab Chrome 137 können Sie CSS-Inline-Bedingungen mit der Funktion if() ausprobieren. if() bietet eine übersichtlichere Entwickleroberfläche für dynamische Stile wie Stilabfragen und Medienabfragen. Es gibt einige wichtige Unterschiede, die in diesem Beitrag erläutert werden.

Die CSS-Funktion if() verwendet eine Reihe von Bedingungs-Wert-Paaren, die so strukturiert sind:

property: if(condition-1: value-1; condition-2: value-2; condition-3: value-3);

Sie können eine else-Anweisung angeben, die verwendet wird, wenn keine der anderen Bedingungen erfüllt ist:

property: if(condition-1: value-1; condition-2: value-2; condition-3: value-3; else: value-4);

Derzeit werden in if() drei verschiedene Abfragetypen unterstützt:

• style(): Stilabfragen
• media(): Medienabfragen
• supports(): Unterstützt Abfragen

Sehen wir uns das anhand einiger Beispiele an:

Demo: Inline-Medienabfragen

Mit if() können Sie Inline-Medienabfragen in Ihre Stile einfügen. Sie können beispielsweise die Designvorlage eines Nutzers (hell oder dunkel) prüfen oder Inline-Medienabfragen für die Breite des Darstellungsbereichs ausführen. Das folgende Beispiel zeigt die Medienabfrage für Zeigegeräte. Die Standardgröße der Schaltfläche beträgt 30 Pixel auf einem Gerät mit einem präzisen Zeiger wie einer Maus. Bei Touchscreen-Geräten mit einem groben Zeiger sollte die Schaltfläche jedoch mindestens 44 Pixel groß sein, damit der Touch-Abstand für einen leichteren Zugriff geeignet ist.

button {
  aspect-ratio: 1;
  width: if(media(any-pointer: fine): 30px; else: 44px);
}

Der vorherige Code führt zum selben Ergebnis wie die folgende Medienabfrage:

button {
  aspect-ratio: 1;
  width: 44px;
}

@media (any-pointer: fine) {
  button {
    width: 30px;
  }
}

Mit dem if()-Format können Sie die Logik inline einfügen, ohne dass die Stillogik an zwei verschiedenen Stellen erforderlich ist.

Demo: Inline-Supportanfragen

Eine weitere Möglichkeit, if() zu verwenden, besteht darin, Inline-Supportanfragen zu erstellen. Wenn Sie beispielsweise prüfen möchten, ob die Unterstützung für Wide-Gamut-Farben wie OKLCH vorhanden ist, können Sie Folgendes verwenden:

body {
  background-color: if(
    supports(color: oklch(0.7 0.185 232)): oklch(0.7 0.185 232);
    else: #00adf3;
  );
  
  &::after {
    content: if(
    supports(color: oklch(0.7 0.185 232)): "Your browser supports OKLCH";
    else: "Your browser does not support OKLCH";
    );
  }
}

Wenn der Browser mit diesem Code den oklch-Farbraum unterstützt, sieht der Nutzer die lebendigere Farbe und erhält die Meldung „Ihr Browser unterstützt OKLCH“ in ::after-Pseudoinhalten.

Weitere Informationen und den Unterschied zwischen RGB und erweiterten Farbräumen finden Sie in der Farbauswahl und in den Ressourcen unter oklch.com.

Demo: UI-Status visualisieren

Sie können if() auch für statusbasiertes Styling verwenden. Beispielsweise können Sie Fortschrittskarten je nach UI-Status (ausstehend oder abgeschlossen) formatieren. Speichern Sie den Status direkt in einem Datenattribut oder einer benutzerdefinierten Property und wenden Sie dann mithilfe von if() Inline-Stile auf die Property an.

<div class="card" data-status="complete">
  ...
</div>

.card {
  --status: attr(data-status type(<custom-ident>));
  border-color: if(
                style(--status: pending): royalblue;
                style(--status: complete): seagreen;
                else: gray);
  background-color: if(
                style(--status: pending): #eff7fa;
                style(--status: complete): #f6fff6;
                else: #f7f7f7);
}

• 3-minütiges Demovideo zu Demo 3
• Artikel von Lea Verou