Space Variable Placeholders
- Published on:
- Space Toggles 2, CSS Variables 2, CSS 37
- Current drink:
- Camomile tea
I already posted this week once about space toggles, but today I did use a variation of the technique, where it is not strictly space toggles, but something like space placeholders. I’m not sure if I have previously seen any specific articles about this, so I decided to write about it (if you know of other articles about this — please let me know, I’ll mention them here).
The idea is: sometimes we want to make some properties extensible, which can be very useful for properties that do not have longhands like
text-shadow, or for properties which can accept an unlimited number of values like the same
box-shadow, but also
transform (which recently got an ability to specify values separately, but it might still be useful to do this with the original property) and so on.
CSS variables can be very helpful for coming up with your API, which allows controlling these properties in some very precise ways.
Here is one way I like to do this:
There are a few interesting things going on in there which might look weird at the first glance, but allow me to explain!
In CSS, we can see the weird comma at the end of the variable name:
var(--em-shadow-top,)— this is a valid way to define an empty fallback, or a space, often used in the space toggles.
I wrote a bit more extensively about this part in my article on cyclic toggles, but in short: whenever the variable in question has its initial value (or — it is not defined, or it is invalid at computed-value time), it would result in just an empty space, which is a valid thing to have in any part of any value in CSS. This is a very compact way of saying, “we can put something here, but it is also ok to just skip it”. If we don’t use the comma, the “initial” value of the variable would make the whole property invalid, so we have to have some fallback here.
box-shadowdefinition ends with
0 0. If you’d look at the HTML we have, you might already guess why: we define our variables like this:
--em-shadow-top: var(--shadow-border),;— note the comma at the end. Because CSS does not allow trailing commas in lists, and we don’t know in advance which variables we could define and in which order, we want to make sure any combination of them would work.
The easiest way to achieve this is by adding the comma either to our token definition (like to the
--shadow-border), or to the places where we use the tokens (as in the example). With the
0 0at the end of our
box-shadow, we can be sure that if we’d add a comma for any of the values, things would still render properly. And the
0 0is just the smallest valid shadow that does not really do anything. Other properties could have other ways of handling this, but often they would not even require this comma stuff, like for the
transformvalues which are just separated by spaces.
The rest should be relatively obvious: we’re using tokens so we won’t need to define their values all the time, we can define the “default” values on the ancestors (on the
<p> in our case), and then override them back to nothing (see
This is also just one of the ways something like this can be handled, and there are various other cases where we could use CSS variables in this manner. Custom properties are powerful!