CSS/Funktionen/if()

Experimentelles Feature! (Stand: Juli 2026)

Browserunterstützung
caniuse.com

Die CSS-Funktion if() ist die kleine Schwester der CSS-Conditionals @-Regeln @when und @else, die es bisher noch in keinen Browser geschafft haben. Sie ermöglicht es, je nach Ergebnis einer Bedingungsprüfung unterschiedliche Werte für eine Eigenschaft festzulegen. Die generelle Syntax ist:

if(bedingung:wert; else:wert;);

Die Anzahl der Bedingungen, die man notiert, ist durch die Syntax nicht beschränkt. if() liefert den ersten Wert, dessen Bedingung wahr ist. Das Schlüsselwort else verhält sich wie eine wahre Bedingung und gehört darum ans Ende. CSS verbietet nicht, hinter dem else-Teil weitere Bedingungen zu schreiben, aber sie werden nie ausgewertet. Die Angabe eines else-Teils ist optional, aber wenn keine Bedingung zutrifft, wird die CSS-Eigenschaft nicht gesetzt, so, als ob ein fehlerhafter Wert angegeben worden wäre.

if() kann überall dort verwendet werden, wo CSS einen Wert erwartet. Bei Eigenschaften, die mehrere Werte erwarten, kann man mit if() einen oder auch mehrere Werte setzen.

Es gibt vier Typen von Bedingungen:

• boolsche Verknüpfung anderer Bedingungen mit and, or und not. Die verknüpften Bedingungen müssen eingeklammert werden.
• Test auf ein Medienfeature so wie in einer @media-Abfrage: media(width > 20em)
• Test auf den Wert eines Custom Property: style(--farbe: red)
  Die Spezifikation sieht sogar Abfragen auf den berechneten Wert beliebiger CSS-Eigenschaften vor, dafür fehlt aber noch die Browserunterstützung.
• Test auf Feature-Unterstützng: supports(color:light-dark(black,white))

Media-Abfragen funktionieren ähnlich wie in der @media-Regel, allerdings ist die Abfrage auf Medientype nicht möglich. Style-Abfragen sind bei den @container-Abfragen näher beschrieben und Feature-Abfragen bei @supports.

anwendbar auf

alle Eigenschaften

Beispiel

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

Diese Fallunterscheidung ergibt das gleiche Ergebnis wie dieser Code, dessen Umständlichkeit durch Einsatz von Schachtelung bereits reduziert ist:

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

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

Beachten Sie: Zwischen if und der öffnenden Klammer darf keine Leerstelle stehen!

Weblinks

• CSS Values 5 Spezfikation: if() function
• CSS Conditionals 5 Spezifikation: Generalized Condition Rules: the @when rule
• MDN: if() (MDN)
• CSS conditionals with the new if() function von Una Kravets (developer.chrome.com)
• Browser-Support: caniuse.com