Conditions

when() picks one of two values from a condition, and :when() matches whole rules. Boolean conditions compile to native if() where the browser supports it.

when()

property: when(<condition>, <if-true>, <if-false>?);

The second value is optional. When the condition is unknown, when() gives no value at all (the property is unset).

.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;}

Writing conditions

Conditions use ==, !=, >, <, >=, <=, and, or, not and parentheses.

.cart .badge {  display: when(--items > 0, inline-flex, none);}.page {  color-scheme: when(--theme == dark, dark, light);}.panel:when(--open and not --pinned) {  box-shadow: 0 8px 24px rgb(0 0 0 / 0.12);}

Operands

States, previous(--x), direction(--x), numbers, dimensions, true/false, keywords and quoted strings. Strings compare exactly and keywords case-insensitively. Units convert where CSS can convert them, so 10px == 7.5pt is true.

Bare states must be booleans

when(--open, …) needs --open to be a boolean. For numbers, write the comparison: when(--count > 0, …).

Unknown, not false

A missing state or an impossible comparison makes the condition unknown rather than false.

An unknown when() gives no value and an unknown :when() doesn’t match. Both log a warning in ReactiveCSS.diagnostics.

:when()

Use :when() when several declarations change together, or when you need more than two outcomes.

:root {  --theme: state(light);}.theme-button:on(click) {  --theme: cycle(light, dark, sepia);}.page:when(--theme == dark) {  background: #1c1917;  color: #f5f5f4;}.page:when(--theme == sepia) {  background: #f3e7d0;  color: #3f2d1c;}

Native if()

When a condition is made only of boolean states with and, or and not, and the values are static, when() compiles to native if() in browsers that support it (Chromium and WebKit are tested). The result is identical, with less runtime work.

Fallbacks

Declare a static value first. Without the runtime, the browser drops the when() declaration and keeps the one before it.

.price::after {  content: "$10 / month";  content: when(--annual, "$96 / year", "$10 / month");}

Related