demo · v142

CSS if() Playground

Edit CSS with an if() expression and live HTML. Drag the slider to change --value and watch the condition flip — colour, size, and border respond instantly. No JavaScript for the styling, only for slider wiring.

Note: CSS if() is not detected in this browser (CSS.supports("if(style(--x: 1): color: red)") returned false). The editor and breakdown still work for exploration, but live rendering may not apply styles. Check flag status.
30

if() Breakdown

condition—
true value—
false value—
--value30
condition met?—

how if() works

The if() CSS function evaluates a style query against the current element. It returns the first value whose condition matches, or the fallback if none match.

.box {
  color: if(
    style(--value >= 50): green;
    else: red
  );
}

Combine with @property to register a typed custom property so the browser can do numeric comparison inside style():

@property --value {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

see also