CSS Gets Smarter: The New if() Function Changes Everything

For twenty years CSS had no way to say "this value if that condition, otherwise this other value" inside a single declaration. You wrote media queries, multiplied class names, or reached for JavaScript. The if() function changes that: a condition, a value, and a fallback, inline in the property. It shipped in Chrome 137 for custom-property conditions and Chrome 142 extended it to media and support queries.

The syntax

.card {
  border-color: if(
    style(--status: pending): orange;
    style(--status: complete): green;
    else: gray
  );
}

Each branch is a condition, a colon, a value, and a semicolon. Branches are tested in order and the first match wins; else is the fallback. Three kinds of condition exist:

• style(--prop: value) tests a custom property on the element itself, the way container style queries test one on an ancestor.
• media(width > 48rem) or media(prefers-color-scheme: dark) tests a media feature.
• supports(display: grid) tests whether the browser supports a declaration.

Example: one attribute drives the whole component

Set a custom property from markup and let every related declaration follow it:

<div class="badge" style="--level: warning">Disk at 90%</div>

.badge {
  background: if(
    style(--level: warning): #fff4e5;
    style(--level: error): #fdecec;
    else: #eaf0ff
  );
  color: if(
    style(--level: warning): #b45309;
    style(--level: error): #b91c1c;
    else: #1d4ed8
  );
}

Before if() this took three modifier classes or a style query with a wrapper container. Now the element carries its own state and the stylesheet reads like a switch statement.

Example: dark mode in one declaration

body {
  background: if(media(prefers-color-scheme: dark): #111318; else: #ffffff);
  color: if(media(prefers-color-scheme: dark): #e9ecf2; else: #14171f);
}

The same lines without if() need a second ruleset inside an @media block. For a design-token file with dozens of colours, the inline form keeps each token's light and dark values next to each other.

Example: feature detection per value

.grid {
  display: if(supports(display: subgrid): subgrid; else: grid);
}

This is the one to be careful with. if() itself is the newest feature in the declaration, so a browser without it discards the whole line. Use it for values, not for the property that proves support exists.

Using it safely today

As of October 2026 only Chromium browsers ship if(). Firefox and Safari have it in progress, and on the Baseline scale it is limited availability. That is fine as long as every if() declaration has a fallback, and CSS gives you two ways to write one:

/* 1. Declare twice: browsers without if() keep the first value. */
.card {
  border-color: gray;
  border-color: if(style(--status: complete): green; else: gray);
}

/* 2. Or guard the whole block. */
@supports (color: if(style(--x: 1): red; else: blue)) {
  .card { border-color: if(style(--status: complete): green; else: gray); }
}

Rule of thumb: the fallback value should be the else branch, so unsupported browsers see the default state and nothing looks broken.

if() or container style queries?

Both react to custom properties. Style queries, which ship in all four engines, wrap a block of rules and require the property to be set on a container element, not the element being styled. if() is per value, works on the element itself, and can also test media and support conditions. Use style queries when a whole component changes shape; use if() when one or two values need to flip. In a year they will be used together.

Reference: the if() page on MDN and the Web Platform Status entry for current browser support.