CSS if() Conditional Demo — Free HTML CSS JS Snippet

CSS has always needed JavaScript to change a style based on a value stored in a custom property — you'd read the property, decide, and toggle a class. The proposed if() function (part of the CSS Values and Units Level 5 draft) lets a property value branch directly in CSS using style() queries against a custom property, with no JavaScript decision-making at all. This snippet is a small, honest demo of that feature: a priority card whose border and badge colors react to a --priority custom property purely through CSS, with a real @supports feature query and a fully working fallback for the (currently large) majority of browsers that don't support it yet. See also css has selector playground and css container query units demo for other emerging-CSS demos.

Being honest about support

As of 2026, if() is genuinely new and experimental — it is not broadly supported the way :has() or container queries now are. This demo does not assume you're on a browser that supports it: it feature-detects with CSS.supports() at load time and clearly labels which path is active, right in the UI, so you can see for yourself whether your current browser is running the modern CSS-only path or the fallback.

The modern path: if() with style() queries

Inside an @supports block, border-left-color and the badge's background/color are set with expressions like if(style(--priority: high): #f87171; style(--priority: medium): #fbbf24; else: #34d399). Each style() query checks the *computed value* of the --priority custom property on that element, and the whole expression evaluates to whichever branch matches — functioning like an inline ternary chain, but written entirely in CSS with no JavaScript reading or branching on the value.

JavaScript's only job: setting one property

In a supporting browser, applyPriority() does exactly one color-relevant thing: card.style.setProperty('--priority', value). It does not add or remove a color class, does not set any inline color, and does not otherwise touch the DOM's presentation — every color you see is a direct consequence of that single custom-property write flowing through the if() expressions in CSS.

A real, working fallback

The @supports (color: if(style(--cif-test: 1): red; else: blue)) feature query is the mechanism that keeps this safe: it evaluates to false in any browser that doesn't understand if(), so those rules are simply never applied — there's no broken, half-parsed CSS left behind. Underneath, a completely ordinary set of data-priority attribute-selector rules (.cif-card[data-priority="high"] { border-left-color: #f87171 }) provides the exact same visual result, so the demo degrades gracefully rather than breaking.

When to reach for this yourself

Treat if() today as something to watch, not something to ship without a fallback — exactly the pattern this snippet demonstrates. If you use it in production ahead of broad support, always pair it with a genuine @supports-gated (or attribute/class-based) fallback path like this one, and re-test browser support periodically since this is one of the fastest-moving corners of the CSS spec.