CSS Conditionals am Beispiel If()

CSS if(): Bedingte Styles direkt in CSS nutzen

Warum CSS if() relevant ist

CSS wird zunehmend leistungsfähiger. Viele Aufgaben, für die früher zusätzliche Klassen, verschachtelte Media Queries oder JavaScript nötig waren, lassen sich heute direkt im Stylesheet lösen. Eine relevante Entwicklung in diesem Bereich ist die CSS-Funktion if(). Sie erlaubt es, einzelne Property-Werte abhängig von Bedingungen zu setzen: etwa anhand der Viewport-Breite, unterstützter CSS-Features oder definierter Custom Properties.

Für moderne Frontend-Architektur ist das relevant, weil sich Varianten näher an der jeweiligen Eigenschaft beschreiben lassen. Statt eine Klasse an mehreren Stellen im Stylesheet zu verändern, kann eine Bedingung direkt dort stehen, wo der Wert gebraucht wird. Das macht CSS nicht automatisch besser, kann aber bei ausgewählten Anwendungsfällen zu übersichtlicherem und wartbarerem Code führen.

‍

Wichtiger Hinweis zum Browser-Support

CSS if() ist aktuell noch keine breit abgesicherte Standardfunktion. Laut MDN ist die Funktion experimentell und nicht Baseline, weil sie in einigen der meistgenutzten Browser nicht funktioniert. Laut Can I Use wird if() in Chrome und Edge ab Version 137 unterstützt, während Safari und Firefox zum Abrufzeitpunkt nicht unterstützt werden. Für produktive Projekte gilt deshalb: nur mit Fallback und Progressive Enhancement einsetzen.

‍

Was ist die CSS-if()-Funktion?

Die CSS-Funktion if() setzt unterschiedliche Werte für eine Eigenschaft, abhängig davon, welche Bedingung zutrifft. Die Bedingung kann auf einer Media Query, einer Style Query oder einer Feature Query basieren. Damit wird if() nicht zu einem Ersatz für klassische CSS-Regeln, sondern zu einer Ergänzung für Fälle, in denen einzelne Werte abhängig von einem Zustand wechseln sollen.

Der entscheidende Unterschied zu @media oder @supports: Diese At-Rules kapseln ganze Regelblöcke. if() arbeitet dagegen innerhalb eines Property-Wertes. Dadurch kann dieselbe CSS-Klasse kompakter bleiben, wenn nur ein einzelner Wert angepasst werden muss.

‍

Grundsyntax

1.element {
2  property: if(
3    media(width < 600px): value-for-small-screens;
4    else: default-value;
5  );
6}

‍

• Bedingung und Wert trennen: Jeder Zweig besteht aus einer Bedingung, einem Doppelpunkt und dem dazugehörigen Wert.
• Mehrere Zweige trennen: Mehrere Bedingungen werden durch Semikolons getrennt.
• else einplanen: Ein else-Zweig ist in der Praxis fast immer sinnvoll, weil er den Standardwert definiert.
• Keine Leerstelle nach if: Die Schreibweise muss if() lauten. if () mit Leerzeichen kann die Deklaration ungültig machen.

‍

Die drei wichtigsten Bedingungstypen

‍

1. Media Query: abhängig vom Viewport oder Ausgabemedium

Media Queries eignen sich, wenn ein Wert von der Bildschirmbreite, Orientierung oder einem Ausgabemedium abhängen soll. Das ist besonders nützlich für kleine responsive Anpassungen, etwa Abstände, Größen oder einzelne Transformationswerte.

‍

1.card {
2  padding: if(
3    media(width < 600px): 1rem;
4    else: 2rem;
5  );
6}

‍

2. Feature Query: abhängig von Browser-Fähigkeiten

Feature Queries prüfen, ob ein Browser eine bestimmte CSS-Funktion oder einen bestimmten Wert unterstützt. Damit lassen sich moderne Werte einsetzen, ohne ältere Browser vollständig auszuschließen.

‍

1.heading {
2  color: if(
3    supports(color: lch(29.57% 43.25 344.44)):
4      lch(29.57% 43.25 344.44);
5    else: #792359;
6  );
7}

‍

3. Style Query: abhängig von Custom Properties

Style Queries werden besonders interessant, wenn Komponenten über CSS Custom Properties gesteuert werden. So lassen sich Varianten definieren, ohne für jede Variante komplett neue Regelblöcke schreiben zu müssen.

‍

1.badge {
2  --status: neutral;
3  background-color: if(
4    style(--status: success): #e7f7ee;
5    style(--status: warning): #fff8db;
6    else: #f4f5f5;
7  );
8}
9
10.badge--success { --status: success; }
11.badge--warning { --status: warning; }

‍

Praxisbeispiel: Responsive Box ohne zusätzliche Klassenlogik

Im ursprünglichen Beispiel wird ein einzelnes div mit einer Breite von 500px erstellt. Wenn der Viewport kleiner als 600px wird, soll das Element herunterskaliert werden, damit es vollständig sichtbar bleibt. Das Beispiel ist bewusst einfach gehalten, zeigt aber gut, wo if() die Lesbarkeit verbessern kann.

‍

HTML

<div class="demo-box">
  CSS if() Demo
</div>

‍

Klassische Umsetzung mit @media

1.demo-box {
2  width: 500px;
3  max-width: 100%;
4  transform-origin: left top;
5  transform: none;
6}
7
8@media (width < 600px) {
9  .demo-box {
10    transform: scale(0.8);
11  }
12}

‍

Diese Lösung ist robust und breit unterstützt. Der Nachteil entsteht erst in größeren Stylesheets: Eine einzelne Komponente kann über viele Media-Query-Blöcke verteilt sein. Dadurch wird es schwerer, alle relevanten Werte einer Klasse schnell zu finden.

‍

Umsetzung mit CSS if()

1.demo-box {
2  width: 500px;
3  max-width: 100%;
4  transform-origin: left top;
5  transform: if(
6    media(width < 600px): scale(0.8);
7    else: none;
8  );
9}

‍

Das visuelle Ergebnis bleibt gleich: Unterhalb von 600px wird die Box skaliert, oberhalb davon nicht. Der Unterschied liegt in der Organisation des Codes. Der bedingte Wert steht direkt an der transform-Eigenschaft. Das kann eine Komponente übersichtlicher machen, wenn nur einzelne Werte variieren.

‍

Fallbacks: Warum Progressive Enhancement Pflicht ist

Da CSS if() noch nicht in allen wichtigen Browsern verfügbar ist, sollte die Funktion nicht ohne Fallback produktiv eingesetzt werden. Die sichere Reihenfolge lautet: zuerst einen breit unterstützten Standardwert definieren, anschließend eine klassische Fallback-Regel ergänzen und danach die if()-Variante nur in unterstützenden Browsern aktivieren.

‍

1.demo-box {
2  width: 500px;
3  max-width: 100%;
4  transform-origin: left top;
5  transform: none;
6}
7
8@media (width < 600px) {
9  .demo-box {
10    transform: scale(0.8);
11  }
12}
13
14@supports (transform: if(media(width < 600px): scale(0.8); else: none)) {
15  .demo-box {
16    transform: if(
17      media(width < 600px): scale(0.8);
18      else: none;
19    );
20  }
21}

‍

So bleibt die Darstellung auch in Safari und Firefox kontrollierbar. Browser ohne if()-Support verwenden den Standardwert und die klassische Media Query. Browser mit if()-Support können die kompaktere Schreibweise nutzen.

‍

Vergleich: if() vs. @media, @supports und @container

‍

Wann ist CSS if() sinnvoll?

Sinnvoll ist if() vor allem dann, wenn einzelne Werte abhängig von einer klaren Bedingung wechseln und der Code dadurch lesbarer wird.

• Einzelne responsive Werte wie padding, margin, transform, border, color oder font-size.
• Design Tokens und Custom Properties, die Varianten einer Komponente steuern.
• Status-Varianten, zum Beispiel success, warning, error oder neutral.
• Feature-Fallbacks, etwa moderne Farbformate mit klassischem Ersatzwert.
• Komponenten, bei denen zusammengehörige Werte nah beieinander bleiben sollen.

Weniger geeignet ist if(), wenn ganze Layouts wechseln oder viele zusammenhängende Deklarationen betroffen sind. In solchen Fällen bleiben @media, @container oder separate Komponentenvarianten meist verständlicher.

‍

Typische Fehler beim Einsatz von CSS if()

• Zu früh produktiv einsetzen: Ohne Fallback kann die Deklaration in nicht unterstützenden Browsern wirkungslos bleiben.
• Keinen else-Zweig definieren: Wenn keine Bedingung zutrifft, kann ein unerwarteter oder ungültiger Wert entstehen.
• if() für komplette Layouts erzwingen: Die Funktion ist stark bei einzelnen Werten, aber kein Ersatz für sauber strukturierte Layout-Regeln.
• Browser-Support verallgemeinern: Nicht alle Chromium-basierten Browser sind automatisch gleich weit. Vor Veröffentlichung immer Kompatibilität prüfen.
• Lesbarkeit aus den Augen verlieren: Eine sehr lange if()-Kette kann schwerer zu warten sein als ein klassischer Regelblock.

‍

Fazit

CSS if() ist kein Ersatz für alle Media Queries, sondern ein zusätzliches Werkzeug für moderne Frontend-Architektur. Besonders bei einzelnen Wertänderungen kann die Funktion Stylesheets lesbarer machen und Komponentenlogik näher an die jeweilige Property bringen. Für produktive Projekte bleibt der eingeschränkte Browser-Support der entscheidende Punkt: Wer if() nutzt, sollte Fallbacks und Progressive Enhancement fest einplanen.

‍

Quellen

• MDN Web Docs: if() CSS function, https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/if
• Can I Use: CSS if() function, https://caniuse.com/css-if