demo · v137
Component Variants
CSS if() with style() queries lets you encode every variant of a component — size, intent, state — directly in CSS. One class, no JavaScript toggle, no BEM modifier cascade.
NoteCSS
if() ships in Chrome 137. The style() query form shown here requires Chrome 137+. On older browsers a JS fallback re-applies the same values imperatively.
Checking CSS if() + style() support…
Button — variant
Button — size
Alert — variant
Alert — size
Operation completed.
/* All variants live in a single CSS rule.
Set --variant and --size as custom properties on the element. */
.c-btn {
background: if(
style(--variant: danger): var(--accent-rose);
style(--variant: success): var(--accent-emerald);
style(--variant: ghost): transparent;
else: var(--text-black)
);
padding: if(
style(--size: lg): 0.8rem 1.8rem;
style(--size: sm): 0.3rem 0.7rem;
else: 0.55rem 1.2rem
);
}
/* Usage: set properties inline or via data attributes */
.c-btn { --variant: danger; --size: lg; }