demo · v137
if() resolver
Build a chain of style() / media() / supports() arms and watch the resolver decide which one fires. The first arm whose predicate is true wins; the rest short-circuit. Live target element below the resolver shows the actual paint.
Heads upRequires Chrome 137+ for native
if(). If unavailable the resolver still works in JS and applies the chosen value to the preview element with element.style.probing…
environment
arms (top to bottom)
resolved value: …
Aa Bb Cc — sample heading
generated CSS
.target { color: if(/* … */); }