CSS if() conditional function

Só Chrome 137; Safari Technology Preview 249 (julho de 2026), Firefox em desenvolvimento. Não é Baseline.

Chrome 137Edge 137Safari TPFirefox no

Condições inline num valor: `if(style(--variant: primary): #2563eb; else: #e5e7eb)`. Também condições `media()` e `supports()`, então uma declaração pode ramificar por custom properties, media features ou suporte a recursos.

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: Declare valores simples antes de cada linha com if(); navegadores sem suporte descartam as declarações com if().

Fonte: caniuse.com/css-if

Prompt

Onde uma única propriedade depender de uma custom property "prop", use `if(style(--prop: value): A; else: B)` em vez de classes modificadoras separadas, e `if(media(...): ...)` para pequenos ajustes responsivos. Só Chromium em 2026-09: mantenha uma declaração de fallback simples acima de cada linha com `if()`.