when()

Picks one of two values from a condition. Boolean conditions compile to native if() where supported.

Syntax

when(<condition>[, <if-true>[, <if-false>]])

registry syntax: when(condition [, if-true [, if-false]])

Parameters

conditionstates, comparisons, and / or / notrequired

See Conditions. A bare state must be a boolean.

if-true<declaration-value>optional

Used while the condition is true. Without any value, when(condition) gives true or false (0.5.3).

if-false<declaration-value>optional

Used while the condition is false. Without it, the value is empty while the condition is false.

Return value

One of the values, true / false when no values are given, or nothing (unset) while the condition is unknown.

Example

.billing {  --annual: state(false);}.billing [role="switch"]:on(click) {  --annual: toggle();}.billing [role="switch"] {  --attr-aria-checked: var(--annual);}.price::after {  content: when(--annual, "$96 / year", "$10 / month");}.saving {  display: none;}.saving:when(--annual) {  display: inline;}

Behavior

• Subscribes only to the state cells it reads.
• Compiles to native if() for conditions of boolean states with and / or / not and static values.
• The result is a normal computed value, so transitions on that property run.

Supported contexts

• The value of any property, including custom properties and inside calc().

Limitations

• Not in at-rule conditions such as @media.
• A missing state or impossible comparison is unknown, not false.
• On the native if() path, a missing state logs no warning.

native equivalent · if(style(...)) for boolean conditions with static branches

Examples

• Conditional state · API examples, runs the real runtime

Related