CSS if() conditional function

Chrome 137 only; Safari Technology Preview 249 (July 2026), Firefox in development. Not Baseline.

Chrome 137Edge 137Safari TPFirefox no

Inline conditions in a value: `if(style(--variant: primary): #2563eb; else: #e5e7eb)`. Also `media()` and `supports()` conditions, so one declaration can branch on custom properties, media features or feature support.

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 plain values before each if() line; unsupported browsers drop the if() declarations.

Source: caniuse.com/css-if

Prompt

Where a single property depends on a custom-property "prop", use `if(style(--prop: value): A; else: B)` instead of separate modifier classes, and `if(media(...): ...)` for small responsive tweaks. Chromium-only as of 2026-09: keep a plain fallback declaration above every `if()` line.