Learn more about Russian war crimes in Ukraine.

What are CSS variables?

Here’s some CSS that was mysterious to me:

html {
  --bg-color: yellow;
  --square-size: 200px;
}
#yellowsquare {
  background-color: var(--bg-color);
  width: var(--square-size);
  height: var(--square-size);
}

And here’s what we get when we apply it to a <div id="yellowsquare">:

I'm #yellowsquare

This uses a CSS feature called “custom properties”, also known as “CSS variables”. You can probably figure out from the CSS roughly how it works. But variable semantics are usually subtle, and actually they’re not officially “variables”, so what’s really going on?

There were two new features in this CSS. The first new feature is the --bg-color: yellow; syntax. This looks like a CSS property, and it is. In particular, it’s a “custom” property, because it begins with --.

Custom properties like --bg-color are not so different from other CSS properties. Like other properties, custom properties “cascade”, which means that a DOM element’s --bg-color value is assigned by the most “specific” selector that applies to that element. In our example, only the root html element in the page got the --bg-color: yellow property via cascade. For example, the #yellowsquare element does not.

But custom properties like --bg-color are also “inherited” properties, like font-family or color (but unlike width or background-color). “Inherited” means, if a DOM element’s --bg-color value is not assigned by the cascade, its value falls back to the --bg-color value assigned to the element’s parent in the DOM. And since the DOM is a tree, this fallback can go all the way to the top, i.e. to the html element. In our example, the --bg-color: yellow set on the html root element will be inherited by every element in the DOM tree, including the #yellowsquare element.

On their own, custom properties have no effect on rendering. To use a custom property, we need a second new feature: the var CSS function. If a DOM element has background-color set to var(--bg-color), this will evaluate to the computed value of that element’s --bg-color property.

The var() expression can take a fallback, e.g. var(--bg-color, black). If the DOM element does not have a --bg-color property, then this expression will instead evaluate to black.

Knowing that CSS variables are actually CSS properties should answer many of the common questions about variables. For example, CSS “variables” are closer to “dynamic” scoping than to lexical scoping.

What can computers do? What are the limits of mathematics? And just how busy can a busy beaver be? This year, I’m writing Busy Beavers, a unique interactive book on computability theory. You and I will take a practical and modern approach to answering these questions — or at least learning why some questions are unanswerable!

It’s only $19, and you can get 50% off if you find the discount code ... Not quite. Hackers use the console!

After months of secret toil, I and Andrew Carr released Everyday Data Science, a unique interactive online course! You’ll make the perfect glass of lemonade using Thompson sampling. You’ll lose weight with differential equations. And you might just qualify for the Olympics with a bit of statistics!

It’s $29, but you can get 50% off if you find the discount code ... Not quite. Hackers use the console!

More by Jim

Tagged #programming, #web, #css. All content copyright James Fisher 2019. This post is not associated with my employer. Found an error? Edit this page.