css-if-notation.md

CSS if() notation (inline conditionals on custom properties / self-styling feature)

.callout {
	border-color: if(
		style(--variant: success) ? var(--color-success-30) :
		style(--variant: danger) ? var(--color-danger-30) :
		/* (other variants) */
		var(--color-neutral-30)
	);
	background-color: if(
		style(--variant: success) ? var(--color-success-95) :
		style(--variant: danger) ? var(--color-danger-95) :
		/* (other variants) */
		var(--color-neutral-95)
	);

	@container (style(--variant: success)) {
		&::before {
			content: var(--icon-success);
			color: var(--color-success-05);
		}
	}

	/* (other variants) */
}

• CSS Values and Units Module Level 5
• #10064 [css-values-5] What is the MVP for inline conditionals on custom properties? 🔥
• Chrome Status: CSS if() function
• Chrome Intent to Prototype: CSS if() function
• if() in CSS combined with other modern stuff
• Inline conditionals in CSS?
• [css-values-5] What is the MVP for inline conditionals on custom properties? #10064

The major author pain point remains unsolved, and authors have to resort to HTML attributes instead (as explained in #5624).

zx-tag {
  /* if(media(<media-condition>): foo; else: bar) */
  /* if(style(<style-query>): foo; else: bar) */
  /* if(<supports-condition>): foo; else: bar) */
  background-color: if(
    style(--variant: success): green;
    else: white;
  );
}