Conditional Status Badge

A status badge whose color is chosen entirely in CSS from a custom-property value on the element itself — no JS class-toggling, no server-rendered className map — using the new if() function with a style() query: background: if(style(--status: 1): green; style(--status: 2): amber; style(--status: 3): red; else: grey). This replaces the classic 'map a status enum to a Tailwind/CSS class in JS and swap it' pattern for the common case where the only thing that actually varies is a value already sitting in a custom property. Real, current, sourced support as of this run: the Chrome for Developers blog post 'CSS conditionals with the new if() function' (developer.chrome.com/blog/if-article), MDN's 'if() CSS function' reference, and CSS-Tricks' 'Lightly Poking at the CSS if() Function in Chrome 137' all confirm if()/style() shipped stable in Chrome 137 (mid-2025); cross-checked against a second, independent query (LogRocket's 2025 write-up) which agrees. Firefox and Safari are NOT asserted as shipped: every source found this run places Firefox support 'in progress' and Safari on its roadmap for 2026–2027 only — left unconfirmed in stable rather than rounded up, same policy as every prior entry in this catalog. **Important honest distinction from recent entries in this same catalog (field-sizing, appearance: base-select):** if() does NOT auto-degrade on its own — every source checked this run states explicitly that an unsupporting browser drops the whole if(...) value as invalid at parse time with no built-in fallback, so the safety net has to be the ordinary CSS cascade: declare a plain fallback color first, then the if()-based override second, so an unsupporting browser simply never reaches the second (invalid-to-it) declaration and keeps the first. That two-line cascade trick is exactly what this demo does (see the CSS tab) — not a claim that if() degrades for free. (Vanilla example: live iframe preview + HTML/CSS tabs — three badges, each carrying a different --status custom property, colored purely by the if()/style() query.)

<div class="cif-wrap">
  <span class="cif-badge" style="--status: 1">Live</span>
  <span class="cif-badge" style="--status: 2">Pending</span>
  <span class="cif-badge" style="--status: 3">Failed</span>
  <span class="cif-note">Needs Chrome/Edge 137+ for the live colors — falls back to one neutral grey everywhere else</span>
</div>