# CSS if() conditional function

Status: Nur Chrome 137; Safari Technology Preview 249 (Juli 2026), Firefox in Entwicklung. Nicht Baseline.  
Quelle: https://caniuse.com/css-if  
Seite: https://designforai.dev/de/css/if

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.

## HTML

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

## CSS

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

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

## 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.