demo · v142

if() Thermostat

The other surface this Chrome 142 work unlocks: the inline if() function with style-range comparisons in a single property value. One CSS rule swaps background and text colour based on a numeric custom property, with three branches (≥ 30, ≤ 5, else). No JS, no nested selectors, no fallback chain.

22°C background colour driven by if(style(--temp))
browser supports if()
—
supports style() range
—
matched branch
else

In Chrome 142+ the colour comes straight from CSS via if(style(--temp ≥ 30): …). In older browsers the polyfill below sets the same colours as inline styles to keep the visual.

relevant CSS

.thermo {
  --temp: 22;
  background: if(
    style(--temp >= 30): #ffeded,
    style(--temp <= 5):  #edf4ff,
    else:                 white
  );
  color: if(
    style(--temp >= 30): crimson,
    style(--temp <= 5):  royalblue,
    else:                 black
  );
}

see also