# CSS if() conditional function

Estado: Solo Chrome 137; Safari Technology Preview 249 (julio de 2026), Firefox en desarrollo. No es Baseline.  
Fuente: https://caniuse.com/css-if  
Página: https://designforai.dev/es/css/if

Condiciones en línea dentro de un valor: `if(style(--variant: primary): #2563eb; else: #e5e7eb)`. También condiciones `media()` y `supports()`, así que una sola declaración puede bifurcarse según custom properties, media features o soporte de funciones.

## 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: Declara valores planos antes de cada línea con if(); los navegadores sin soporte descartan las declaraciones con if().

## Prompt

Cuando una sola propiedad dependa de una custom property "prop", usa `if(style(--prop: value): A; else: B)` en lugar de clases modificadoras separadas, e `if(media(...): ...)` para pequeños ajustes responsivos. Solo Chromium a fecha 2026-09: conserva una declaración plana de respaldo encima de cada línea con `if()`.