The CSS Custom Property Toggle Trick

Back in July 2020, an email from James0x57 revealed a hidden gem within the CSS specification: a technique leveraging whitespace to create powerful conditional logic and feature toggles for custom CSS properties. This hinges on a seemingly insignificant detail: a CSS custom property can validly be assigned a single whitespace character.

The key passage in the CSS spec is: "Note: While <declaration-value></declaration-value> must represent at least one token, that one token may be whitespace." This means --foo: ; is perfectly acceptable.

Initially, this might seem unremarkable. However, as James0x57 demonstrated, it unlocks surprising capabilities. The core idea involves using a placeholder variable to control multiple CSS properties.

Consider a scenario with a 900px breakpoint. A variable --mq-sm switches between initial (for widths above 900px) and a space (for widths below 900px). Another variable, --padding-when-small, combines initial and 2rem.

When the browser width exceeds 900px (--mq-sm: initial), --padding-when-small becomes invalid (containing initial and 2rem). The var() function's fallback mechanism then selects the second value (2rem). Conversely, when the width is less than 900px (--mq-sm: (space)), --padding-when-small becomes valid (" 2rem"), and the first value is used.

This allows toggling padding (or other properties) based on a single placeholder variable. While seemingly a complex way to manage padding, the true power lies in the ability to control numerous other values with a single media query that manipulates the placeholder. This offers a cleaner alternative to scattering media queries throughout the CSS. It effectively introduces IF/THEN logic to CSS.

James0x57 further explored this concept, extending it to encompass AND, OR, XOR, and other logical operations. However, the complexity increases significantly.

The behavior of CSS custom properties, especially regarding fallbacks and comma-separated values, can be quite intricate. Patrick Brosset's work (possibly from 2015) highlights the potential for deeply nested fallbacks:

color: var(--foo, var(--bar, var(--baz, var(--are, var(--you, var(--crazy)))));

And comma-separated values within custom properties:

content: var(--foo, one, two, three);

This raises questions about whether the comma-separated values represent a single fallback value.

Lea Verou also explored this whitespace technique, showcasing its use in creating button variations and controlling multiple properties within a single rule. While powerful, Lea highlights drawbacks: complex conditional logic (like "background is red if --foo is set, otherwise white") is not directly supported, and the syntax (--foo:;) can appear erroneous to those unfamiliar with the technique.

This whitespace-based approach represents a significant advancement in CSS custom property usage. We've progressed from simple preprocessor-like variables, through cascading and fallbacks, increased JavaScript integration, and now this powerful conditional logic. The ongoing discussion about retaining CSS preprocessor variables underscores their unique capabilities, particularly in manipulating color values.

The above is the detailed content of The CSS Custom Property Toggle Trick. For more information, please follow other related articles on the PHP Chinese website!