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) */
}

• 2025-11-13 — The Range Syntax Has Come to Container Style Queries and if()
• 2025-07-01 — CSS conditionals with the new if() function
• CSS if() function & reading-flow (in Chrome 137)
• CSS if() function #1045
• Intent to Ship: Short-circuiting var(), attr()
• 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
• 2024-06-18 — 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).

Examples

style condition

Demo

lx-badge {
  /* if(media(<media-condition>): foo; else: bar) */
  /* if(style(<style-query>): foo; else: bar) */
  /* if(<supports-condition>): foo; else: bar) */
  --color: 
    if(
     style(--variant: info): var(--l-color-text-info);
     style(--variant: success): var(--l-color-text-success);
     style(--variant: warning): var(--l-color-text-warning);
     style(--variant: danger): var(--l-color-text-danger);
     else: var(--l-color-text-neutral);
  );
}

media condition

Demo

.responsive-layout {
  display: flex;
  flex-direction: if(media(orientation: landscape): row; else: column);
}

attr condition

Demo

.item {
  background-color: if(style(attr(data-columns type(<integer>)) > 2): royalblue; else: dimgray);
}