CSS bekommt endlich das, worauf Frontend-Entwickler seit Jahren warten: native bedingte Logik direkt in Property-Werten. Mit der neuen if() Funktion kannst du Bedingungen inline schreiben, ohne separate @media-Blöcke oder JavaScript-Workarounds. Das ist ein echter Game-Changer für responsive Designs und dynamische Styles.

In diesem Tutorial zeige ich dir, wie die CSS if() Funktion funktioniert, welche drei Query-Typen es gibt und wie du sie für responsive Layouts effektiv einsetzt.

Grundlegende Syntax der CSS if() Funktion

Die if() Funktion arbeitet mit Condition-Value-Paaren. Du definierst eine Bedingung und den Wert, der angewendet werden soll, wenn die Bedingung erfüllt ist:

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

Ein einfaches Beispiel:

html {
  background: if(media(min-width: 1200px): #f0f0f0; else: #ffffff);
}

Hier wird der Hintergrund auf Desktop-Bildschirmen grau und auf kleineren Geräten weiß. Das Besondere: Die Logik steht direkt beim Property, nicht in einem separaten @media-Block am Ende der Datei.

Die Bedingungen werden der Reihe nach geprüft. Sobald eine zutrifft, wird der entsprechende Wert verwendet. Trifft keine Bedingung zu, greift der else-Wert.

Die drei Query-Typen der if() Funktion

Die if() Funktion unterstützt drei verschiedene Query-Typen, die unterschiedliche Anwendungsfälle abdecken.

style() - Custom Property Abfragen

Mit style() kannst du den Wert von CSS Custom Properties (CSS-Variablen) direkt abfragen. Das ist besonders mächtig für Theme-Systeme:

:root {
  --theme: light;
}

.card {
  background: if(
    style(--theme: dark): #1a1a1a;
    style(--theme: light): #ffffff;
    else: #f5f5f5
  );

  color: if(
    style(--theme: dark): #e0e0e0;
    else: #333333
  );
}

Der entscheidende Unterschied zu Container Style Queries: Mit style() innerhalb von if() kannst du das Element selbst stylen, ohne einen Parent-Container zu benötigen. Die Abfrage erfolgt direkt auf dem Element.

media() - Inline Media Queries

Mit media() schreibst du Media Queries direkt in den Property-Wert. Das hält zusammengehörige Logik zusammen:

.container {
  max-width: if(
    media(width >= 1400px): 1320px;
    media(width >= 1200px): 1140px;
    media(width >= 992px): 960px;
    media(width >= 768px): 720px;
    else: 100%
  );
}

Du kannst alle Media Features nutzen, die du von @media kennst: width, height, orientation, prefers-color-scheme, any-pointer und viele mehr.

supports() - Feature Detection

Mit supports() testest du, ob der Browser bestimmte CSS-Features unterstützt. Perfekt für Progressive Enhancement:

.element {
  display: if(
    supports(display: grid): grid;
    else: flex
  );

  color: if(
    supports(color: oklch(70% 0.15 200)): oklch(70% 0.15 200);
    else: #3498db
  );
}

Praktische Beispiele für Responsive Design

Jetzt wird es praktisch. Hier sind konkrete Beispiele, wie du die if() Funktion für responsive Designs einsetzt.

Responsive Button-Größen

Buttons sollten auf Touch-Geräten größer sein als auf Desktop-Rechnern mit Maus. Mit if() geht das elegant inline:

.button {
  min-height: if(
    media(any-pointer: coarse): 48px;
    else: 36px
  );

  padding: if(
    media(any-pointer: coarse): 12px 24px;
    else: 8px 16px
  );

  font-size: if(
    media(any-pointer: coarse): 1rem;
    else: 0.875rem
  );
}

Der any-pointer: coarse Query erkennt Touch-Geräte, any-pointer: fine präzise Eingabegeräte wie Mäuse. Das ist zuverlässiger als Viewport-Breiten, weil es die tatsächliche Eingabemethode berücksichtigt.

Responsive Typography mit if()

Statt mehrerer @media-Blöcke für unterschiedliche Schriftgrößen kannst du alles inline definieren:

h1 {
  font-size: if(
    media(width >= 1200px): 3.5rem;
    media(width >= 992px): 3rem;
    media(width >= 768px): 2.5rem;
    else: 2rem
  );

  line-height: if(
    media(width >= 768px): 1.2;
    else: 1.3
  );

  letter-spacing: if(
    media(width >= 1200px): -0.02em;
    else: -0.01em
  );
}

.lead {
  font-size: if(
    media(width >= 768px): 1.25rem;
    else: 1.125rem
  );
}

Der Vorteil: Du siehst sofort alle Größen-Varianten beim Property selbst, ohne durch die Datei scrollen zu müssen.

Responsive Layout-Anpassungen

Für Card-Layouts, die sich je nach Viewport ändern:

.card-grid {
  display: grid;

  grid-template-columns: if(
    media(width >= 1200px): repeat(4, 1fr);
    media(width >= 992px): repeat(3, 1fr);
    media(width >= 576px): repeat(2, 1fr);
    else: 1fr
  );

  gap: if(
    media(width >= 768px): 2rem;
    else: 1rem
  );
}

.card {
  padding: if(
    media(width >= 768px): 2rem;
    else: 1.5rem
  );

  border-radius: if(
    media(width >= 768px): 1rem;
    else: 0.5rem
  );
}

Dark Mode mit media()

Ein kurzes Beispiel für Dark Mode ohne JavaScript:

:root {
  --bg-primary: if(
    media(prefers-color-scheme: dark): #121212;
    else: #ffffff
  );

  --text-primary: if(
    media(prefers-color-scheme: dark): #e0e0e0;
    else: #1a1a1a
  );

  --border-color: if(
    media(prefers-color-scheme: dark): #333333;
    else: #e0e0e0
  );
}

body {
  background: var(--bg-primary);
  color: var(--text-primary);
}

Verschachtelte if() Funktionen

Für komplexere Logik kannst du if() Funktionen verschachteln. Hier ein Beispiel, das Viewport-Größe und Farbschema kombiniert:

.hero {
  background: if(
    media(width >= 992px): if(
      media(prefers-color-scheme: dark): linear-gradient(135deg, #1a1a2e, #16213e);
      else: linear-gradient(135deg, #667eea, #764ba2)
    );
    else: if(
      media(prefers-color-scheme: dark): #1a1a2e;
      else: #667eea
    )
  );

  padding: if(
    media(width >= 992px): 6rem 2rem;
    media(width >= 768px): 4rem 1.5rem;
    else: 3rem 1rem
  );
}

Auf großen Bildschirmen zeigt der Hero einen Gradient, auf kleinen eine Volltonfarbe - jeweils angepasst an den Dark/Light Mode.

CSS if() vs. @media: Wann was nutzen?

Die if() Funktion ersetzt nicht @media-Blöcke, sondern ergänzt sie. Hier meine Empfehlungen:

Nutze if() wenn:

Du ein einzelnes Property bedingt setzen willst
Die Logik direkt beim Property stehen soll
Du schnell die Übersicht über alle Varianten brauchst

Nutze @media-Blöcke wenn:

Viele Properties sich gemeinsam ändern
Du dieselbe Bedingung für mehrere Selektoren brauchst
Die Lesbarkeit bei vielen verschachtelten Bedingungen leidet

Ein guter Mittelweg: Nutze if() für einzelne responsive Properties und @media für größere Layout-Umstellungen.

Browser-Support

Browser	Version	Status
Chrome	137+	Unterstützt
Edge	137+	Unterstützt
Chrome Android	137+	Unterstützt
Firefox	-	In Entwicklung
Safari	-	In Entwicklung

Stand Februar 2026 ist die if() Funktion in Chromium-basierten Browsern verfügbar. Firefox und Safari arbeiten an der Implementierung.

Für Produktionscode empfehle ich derzeit:

Die if() Funktion als Progressive Enhancement nutzen
Fallback-Werte über else definieren
Alternativ: Klassische @media-Blöcke als Fallback beibehalten

Aktuellen Support kannst du auf Can I Use prüfen.

Ausblick und Fazit

Die CSS if() Funktion ist erst der Anfang. In Kombination mit dem kommenden @function-Proposal wird CSS noch mächtiger werden. Dann kannst du eigene Funktionen definieren, die if() intern nutzen.

Die wichtigsten Punkte zusammengefasst:

if() ermöglicht bedingte Logik direkt in Property-Werten
Drei Query-Typen: style(), media(), supports()
Ideal für responsive einzelne Properties
Aktuell in Chrome und Edge verfügbar

Die if() Funktion reduziert Boilerplate-Code, hält zusammengehörige Logik zusammen und macht CSS-Dateien übersichtlicher. Für neue Projekte mit Chromium-fokussierter Zielgruppe ist sie bereits heute einsatzbereit.

Weiterführende Links:

CSS if() Funktion: Bedingte Logik direkt in CSS - Tutorial mit Beispielen