UI Development

CSS Custom Properties (CSS Variables)

Variables are the core concept in any programming language. Unfortunately, CSS had no support for variables earlier, but now it does. Nowadays, CSS preprocessors like SASS/LESS are a standard for web development with the ability to use variables in our style sheets. Variables allow us to make the change at one place and be assured that the change will propagate throughout our project. But these preprocessors must be compiled into CSS for any browser to understand. And they have few limitations:

  • They are static and cannot be dynamically updated/changed.
  • They are not aware of the DOM structure.
  • They cannot be accessed/changed through JavaScript.

So, to overcome these limitations, CSS community has invented “CSS Custom properties” which allow us to have dynamic variables that can be modified at run-time (on value change, the browser will repaint), which can understand DOM structure, pure CSS behavior like inheritance and cascade. That can also be accessed/changed through JavaScript which we couldn’t achieve with preprocessor variables.

First ever CSS variable we probably got was ‘currentColor’, it came from SVG and it is now supported everywhere, the way it works, it always resolves to the value of color. We could hack a lot of things with currentColor but it’s very limited.

CSS variables are kind of an expansion of this concept, it’s like currentColor on steroids.

How to define and use CSS Variables –

CSS variables are basically custom properties that start with a double dash like:

And we refer to them using var () function like:

We might be thinking that CSS variables has weird syntax, why can’t it have $ or @ symbol like SCSS/LESS preprocessor does. So, there are 2 reasons for this –

  • First is, able to use SCSS/LESS variables with CSS variables as they do a lot of things you cannot do with SCSS/LESS variables.
  • Another reason is, CSS properties can only contain letters and bashes and it’s easy for the CSS parsers to parse the properties without any clash.

Scoping of CSS Custom Variables –

CSS also has a variable scope like JavaScript, both local and global. To make a variable globally scoped, define it in ‘:root’ selector which is the highest-level element in the DOM.

Secrets of CSS Variables: –

1. CSS Variables work exactly like normal CSS properties.

Custom properties are ordinary properties which can be declared on any element, tag or even pseudo-elements.

2. CSS Variables are inherited properties, but we can change them.

CSS variables are inherited properties which are useful in many cases.

For example, we can set them on the HTML element and access them from any element.

But in some cases, we might not want this behavior, for that we can use the universal selector or :root.

3. CSS Variables can be used in the style attribute.

We can set the variables inline and use them in the styles and get the desired output.

4. CSS Variables are case sensitive.

It’s better to write variables in lower case as CSS variables are case sensitive.

5. CSS Variable fallback parameter.

Fallback is applied when the browser supports CSS Variables, but they are not set.

It is the second parameter to the var () function, as CSS is cascading stylesheet, it doesn’t support fallback. Whereas CSS Variable supports fallback.

  • if CSS variables doesn’t support a browser then cascade provides the fallback.
  • if the browser supports the CSS variables, but the value is not set, then the fallback is taken into consideration.
  • if a value is set, then it is taken into consideration.

6. CSS Variables with invalid variable values = initial.

Case 1: What happens if, we set a non-sensical value like –color: 20px; which is completely irrelevant to the color property as it takes only color values.

It takes default value like color property default value is black.

Case 2: What if, we set a non-sensical value and one that sets it to itself like –

7. Variable chaining.

Chaining of a fallback parameter is possible.

8. Cyclic dependencies make variables invalid.

As CSS is declarative and there is no concept of instruction order for a given element. It can have only one value, it’s not possible for it to be both previous value and its values plus 1 and thus this forms a cycle and is invalid, so its value is set to default/initial value.

9. CSS Variables with Basic Operators (+, -, *, /)

As we are familiar with performing basic operations on variables in preprocessors, even with CSS Variables supports the same. With the help of calc() function, we can perform basic operations.

10. CSS Variable values are token lists & Use them as pure data, not CSS values.

We should use variables for pure data as we can manipulate them to anything we want, but with CSS values like 10vw, we can’t do anything except when they are defined for a specific rule and use them as it is.

Here from the above snippet, we expect the value of width to be ‘40vw’, but browser interprets as ’40 vw’. As browser considers everything in the form of tokens, so it assumes –size value as number and vw as an identifier and resolves it as ’40 vw’ value, so it considers its default value auto.

To overcome this, use calc () –

Let us consider a case where we want to save at least one calc () by setting –size: 40vw; and in height, we write calc () and divide it with 1vw. But it doesn’t work because calc () doesn’t support dividing with lengths (like px, vw, vh), so it takes auto as a default value. But calc () supports dividing with numbers.

If we have a number in a variable, we can always convert it to any unit just by multiplying it with 1 and that unit (px, vw, vh).

Number -> Unit: calc (var (–size) * 1px)

But if we have a unit, there is no way to convert it to a number. Maybe we can do it with JavaScript, but with CSS, we just can’t do it.

Unit -> Number: Impossible

11. CSS Variables make responsive design easier.

CSS variables can be used in media queries. We can change the variable values within+ the @media block, something which is not possible with the preprocessor variables.

12. CSS Variables in @keyframes.

CSS variables and animations work great together. We must define the variables inside the selector that targets the element we want to animate. And refer them with var () inside the keyframes block. The benefit is that we can modify the variable values in the targeted selector without any need to look for each property inside keyframes block. This same concept is applicable in SVG.

13. Accessing CSS Variables with JavaScript.

Lastly, we can directly access CSS variables with JavaScript.

  • To get the variable from inline style

                           element.style.getPropertyValue(“—foo”);

  • To get the variable from anywhere

                           getComputedStyle(element).getPropertyValue(“—foo”);

  • To set the variable on inline style

                           element.style.setProperty(“—foo”, red);

Now you know more about CSS Variables, including their syntax, their advantages, good usage examples and how to interact with them from JavaScript.

How about the Browser support?

Browser support for CSS Variables is pretty good now with decent support for all major browsers (over 90%).

We can provide support for non-supporting browsers to some extent using

  • Cascade
  • @supports block with a dummy conditional query

Thanks!

Thank you for reading this article; I hope you had fun and learned something along the way!

About The Author