CSS-Bedingungen mit der neuen if()-Funktion

Una Kravets

Veröffentlicht am 1. Juli 2025

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

Die CSS-Funktion if() funktioniert mit einer Reihe von Bedingung/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 funktioniert if() mit drei verschiedenen Arten von Anfragen:

• style(): Stilabfragen
• media(): Media-Abfragen
• supports(): Unterstützt Anfragen

Hier einige Beispiele:

Demo: Inline-Medienabfragen

Mit if() können Sie Inline-Medienabfragen in Ihre Stile einfügen. Sie können beispielsweise die bevorzugte Darstellung (hell oder dunkel) eines Nutzers prüfen oder Inline-Medienabfragen für die Breite des Viewports ausführen. Das folgende Beispiel zeigt die Medienabfrage für Zeigergeräte. Die Standardgröße des Buttons wäre 30 px auf einem Gerät mit einem feinen Zeiger wie einer Maus. Bei Touchscreengeräten mit einem groben Zeiger wäre die Größe des Buttons jedoch die empfohlene Mindestgröße von 44 px, um die Berührungsabstände für einen leichteren Zugriff zu gewährleisten.

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

Der obige Code führt zum gleichen Ergebnis wie die folgende Media-Anfrage:

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

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

Wenn Sie das Format if() verwenden, können Sie die Logik inline einfügen, ohne dass die Formatierungslogik an zwei verschiedenen Stellen erforderlich ist.

Demo: Inline-Supportanfragen

Eine weitere Möglichkeit, if() zu verwenden, besteht darin, Inline-Supportanfragen zu erstellen. Um beispielsweise zu prüfen, ob ein breiter Farbraum wie OKLCH unterstützt wird, 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 den oklch-Farbraum unterstützt, sieht der Nutzer mit diesem Code die lebendigeren Farben und erhält außerdem die Meldung „Your browser supports OKLCH“ (Ihr Browser unterstützt OKLCH) im ::after-Pseudoinhalt.

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

Demo: UI-Zustand visualisieren

Sie können if() auch für zustandsbasiertes Styling verwenden. Sie können beispielsweise Fortschrittskarten basierend auf ihrem UI-Status (ausstehend oder abgeschlossen) gestalten. Speichern Sie den Status direkt in einem Datenattribut oder einer benutzerdefinierten Eigenschaft und wenden Sie dann Inline-Stile auf die Eigenschaft an, indem Sie if() verwenden.

<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);
}

Mit style() innerhalb einer if()-Funktion können Sie das Ziel-Element direkt formatieren. Ein übergeordnetes Element, wie es bei CSS-Stilabfragen erforderlich wäre, ist nicht notwendig.

In dieser Demo wird ein grundlegendes Beispiel dafür gezeigt, wie Sie if() verwenden können, um einen neuen architektonischen Ansatz für CSS zu unterstützen. Ein Vorteil der Verwendung von benutzerdefinierten CSS-Properties gegenüber Klassen ist, dass sie in CSS einfacher aktualisiert werden können. Sie können beispielsweise mit Medienabfragen oder Pseudostatus wie :hover aktualisiert werden.

Nächste Schritte

Die Ergänzung von if() bietet CSS-Entwicklern eine neue architektonische Möglichkeit. Mit der Weiterentwicklung von Technologien wie Stilabfragen wird es wahrscheinlich möglich sein, Bereichsabfragen in if()-Funktionen zu verwenden. Sie werden auch in Kombination mit dem bevorstehenden Vorschlag für benutzerdefinierte Funktionen (CSS @function) nützlich sein.

Weitere Informationen zu diesen Funktionen finden Sie hier:

• 3-minütiges Video mit einer Anleitung zu Demo 3
• Artikel von Lea Verou