webdevpuneet.com

Related Snippets

64 in Visualizers category
19–24 of 60

CSS if() Conditional Demo

CSS reading-flow Demo

CSS text-box-trim Demo

CSS light-dark() Theme Demo

Live Region Announcer Demo

Canvas Conway's Game of Life

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

CSS if() Conditional Demo · Visualizers · Plain HTML, CSS & JS · Live preview

CategoryVisualizers
TagsData Visualization

Copy & paste

Source Code

<div class="cif-wrap">
  <div class="cif-card" id="cifCard" data-priority="medium">
    <div class="cif-card-top">
      <span class="cif-badge" id="cifBadge">Medium priority</span>
      <span class="cif-support" id="cifSupport">Checking support&hellip;</span>
    </div>
    <h3>Rewrite onboarding emails</h3>
    <p>Border color, badge color, and badge text all react to the priority below.</p>
  </div>

  <div class="cif-controls">
    <span class="cif-controls-label">Priority</span>
    <div class="cif-btns" id="cifBtns">
      <button type="button" class="cif-btn" data-value="low">Low</button>
      <button type="button" class="cif-btn selected" data-value="medium">Medium</button>
      <button type="button" class="cif-btn" data-value="high">High</button>
    </div>
  </div>

  <p class="cif-note" id="cifNote">This browser supports CSS <code>if()</code> &mdash; colors above are driven purely by CSS reacting to a custom property. No class is being toggled for color.</p>
</div>

Extend with AI

Take This Snippet Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.

· Become a supporter

What's included

Features

Real CSS.supports() detection
Feature detection happens at runtime and is shown directly in the UI, not assumed.
Genuine @supports gate
The if() rules are wrapped in a real feature query, never left to fail silently or break layout.
Working attribute-selector fallback
Unsupported browsers get an equivalent visual result from ordinary CSS, not a broken page.
JS sets only one property
In the supported path, JavaScript never toggles a color class — one custom-property write drives everything.
style() query branching
Demonstrates if() branching on a custom property's computed value, CSS's answer to a ternary.
Transparent support labeling
A visible badge and note tell you exactly which code path is currently active.
No layout breakage either way
Both the modern and fallback paths render an identical, complete-looking card.
Copy-paste safe
Because of the @supports gate, this snippet is safe to use in production today without risking unsupported browsers.

About this UI Snippet

CSS if() Conditional Demo — Native Conditional Styling With a Real Fallback

Screenshot of the CSS if() Conditional Demo snippet rendered live

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.

Step by step

How to Use

  1. 1
    Paste HTML, CSS, and JSA priority card renders with Medium selected and a support indicator in its top-right corner.
  2. 2
    Check the support labelIt reads "if() supported" in green or "if() not supported — using fallback" in amber, based on your actual browser.
  3. 3
    Click Low, Medium, or HighThe border color, badge background, and badge text all update to match.
  4. 4
    Read the note belowIt explains exactly which code path (CSS if() or the class/attribute fallback) is producing what you're seeing.
  5. 5
    Inspect the CSSThe @supports block clearly separates the experimental if() rules from the always-on fallback rules.
  6. 6
    Test in different browsersSupport for if() is expected to vary significantly — that variance is exactly what this demo is built to show honestly.

Real-world uses

Common Use Cases

Learning emerging CSS features
A hands-on way to see if() and style() queries without hunting through spec drafts.
Progressive enhancement demos
A template for safely gating any bleeding-edge CSS feature behind @supports.
Design system prototyping
Explore reducing JS-driven class toggling in favor of CSS-native conditionals as support grows.
Conference talks and blog posts
A concrete, working example to accompany writing about CSS if() and its rollout.
Browser compatibility testing
Drop this into different browsers/versions to track real-world if() support over time.
Complementary CSS-feature demos
Pairs with css has selector playground and css container query units demo in a "new CSS" showcase.
Related: Drag & Drop Reorder List
See the Drag & Drop Reorder List for a related layouts pattern worth pairing with this one.

Got questions?

Frequently Asked Questions

As of 2026, if() with style() queries is a genuinely new, experimental part of the CSS Values and Units Level 5 draft. Support is limited and inconsistent across browsers and versions — this demo does not assume it works, which is exactly why it feature-detects with CSS.supports() and shows you, live, which code path your browser is actually using rather than claiming universal support.

@supports (color: if(style(--cif-test: 1): red; else: blue)) asks the browser "do you know how to parse and apply an if()/style() expression as a color value?" If the browser doesn't recognize the syntax, the feature query evaluates to false and every rule inside that block is skipped entirely — the browser never attempts to apply malformed or partially-understood CSS, which is what keeps the fallback path completely clean.

A custom property plus var() can only be swapped to a different fixed value from JavaScript — the branching logic ("if high, red; if medium, amber; else green") has traditionally lived in JavaScript, which then sets or toggles the appropriate value or class. if() moves that branching decision itself into CSS: the same custom property write now flows through conditional logic that lives entirely in the stylesheet, not in a script.

Yes by design — the fallback uses plain data-priority attribute-selector rules (.cif-card[data-priority="high"] { border-left-color: #f87171 }) that produce the exact same colors as the if() expressions for each priority level. The point of a graceful fallback is that a viewer on an unsupported browser should see a fully correct result, not a degraded or broken one.

Only ahead of broad support if you pair it with a real, tested fallback exactly like this one — never ship if()-only styling with no @supports gate, since unsupported browsers would simply not receive any of those styles. Treat it as an enhancement layered on top of solid, working CSS, and re-check browser support periodically since experimental CSS features like this can gain support quickly.