Efficient CSS Customization: Unleashing — var: ; Hack

The Art of CSS Toggling: Multiple Values Made Easy

Photo by Ambitious Studio* — Rick Barrett on Unsplash

As web developers, we often encounter situations where we need to toggle multiple values across various CSS properties. Imagine having the ability to control the appearance of multiple elements with just a single property value. Well, the good news is that it’s possible with the --var: ; hack, also known as the "whitespace trick" or "space toggle hack."

This technique allows us to use a custom property in combination with the var() function to toggle values in CSS properties. By leveraging the significance of whitespace within custom properties, we can achieve powerful and flexible control over multiple properties and even across different CSS rules.

Understanding the var() Function and Fallbacks

Before diving into the --var: ; hack, let's first understand the var() function and how it works with fallbacks. The var() function allows us to reference custom properties and provides a fallback value in case the custom property is not defined. Here's an example:

background: var(--color, blue);

In the above code snippet, --color is a custom property that acts as a variable. If --color is defined, the background property will use its value. Otherwise, it will fallback to the value blue.

Leveraging initial and Whitespace

The --var: ; hack revolves around two special values: initial and whitespace. The initial value applies the fallback of a property, while whitespace within a custom property is significant and valid within CSS.

Let’s take a look at an example to understand how this hack works. Consider the following code:

--foo: ;
background: var(--foo, linear-gradient(white, transparent)) hsl(220 10% 50%);
border: 1px solid var(--foo, rgb(0 0 0 / .1));
color: rgb(0 0 0 var(--foo, / .8));

In this code, we define a custom property --foo and set its value to whitespace. Notice that we are appending values to the properties using the var() function with --foo as the first argument and the desired value as the second argument.

When --foo is set to whitespace, it effectively enables the fallback values in each property. The result is equivalent to the following code:

background: hsl(220 10% 50%);
border: 1px solid rgb(0 0 0 / .1);
color: rgb(0 0 0 / .8);

As you can see, by simply toggling the value of --foo to whitespace, we can control the appearance of multiple properties simultaneously.

Limitations and Future Possibilities

While the --var: ; hack provides a clever workaround for toggling values, it does have some limitations. One major limitation is that it only allows appending values to existing values or setting a property to either a complete value or initial. It does not provide a way to conditionally set values based on complex conditions.

For example, we cannot say “the background should be red if --foo is set and white otherwise" using this hack alone. However, with some creative use of appending values, certain conditional effects can be achieved.

It’s also important to note that using whitespace as a value within custom properties can affect code readability and may not be immediately intuitive to developers who are not familiar with this technique. Adding comments or using constants can help mitigate this issue.

Fortunately, discussions are already underway in the CSS community to introduce a proper if() function, which would provide a more straightforward and robust way to handle conditionals in CSS.

Conclusion

While the hack has some limitations and readability concerns, it demonstrates the creative possibilities that CSS offers when it comes to achieving complex interactions and effects. As discussions continue within the CSS community, we can look forward to more elegant and intuitive solutions for handling conditionals in CSS.

Thanks for reading. If you enjoyed this article, consider supporting me by becoming a Medium member.