CSS if() conditional function

Nur Chrome 137; Safari Technology Preview 249 (Juli 2026), Firefox in Entwicklung. Nicht Baseline.

Chrome 137Edge 137Safari TPFirefox no

Inline-Bedingungen in einem Wert: `if(style(--variant: primary): #2563eb; else: #e5e7eb)`. Auch `media()`- und `supports()`-Bedingungen, sodass eine Deklaration nach Custom Properties, Media Features oder Feature-Unterstützung verzweigen kann.

CSS

.fx-051{
  padding:8px 14px;border-radius:6px;font:600 14px system-ui;margin-right:8px;
  background:if(style(--variant: primary): #2563eb; style(--variant: ghost): transparent; else: #e5e7eb);
  color:if(style(--variant: primary): #fff; else: #111);
  border:1px solid if(style(--variant: ghost): #111; else: transparent);
  font-size:if(media(width < 480px): 13px; else: 14px);
}
.fx-051 :is(a,button,input,select,textarea):focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

HTML

<button class="fx-051" style="--variant: primary">Primary</button>
<button class="fx-051" style="--variant: ghost">Ghost</button>

Fallback: Deklariere einfache Werte vor jeder if()-Zeile; Browser ohne Unterstützung verwerfen die if()-Deklarationen.

Quelle: caniuse.com/css-if

Prompt

Wo eine einzelne Property von einer Custom-Property-"Prop" abhängt, nutze `if(style(--prop: value): A; else: B)` statt separater Modifier-Klassen und `if(media(...): ...)` für kleine responsive Anpassungen. Chromium-only Stand 2026-09: behalte über jeder `if()`-Zeile eine einfache Fallback-Deklaration.