CSS Variables — How To Use CSS Custom Properties

Till now if you wanted to use variables in CSS you’d have to use some kind of pre-processor like SCSS etc. However CSS and major browsers now support CSS variables, technically called CSS properties.

Custom property support in browsers

As of March 2018, about 86% of all browsers support the CSS variables, the only noteworthy exception being IE11 (though Edge still supports it). But since when did we start worrying about IE? Check out: https://caniuse.com/#feat=css-variables

How to use CSS variables

:root {
    --headings-font-family: "Times New Roman", Times, serif;
}

As you can see we’ve just declared a CSS variable headings-font-family. However strictly speaking for all purposes and intents, it’s going to be used and referred to as --headings-font-family; note the preceding double dashes. We’ll come back to the :root part in a little while.

And here’s how you’d use it:

h2 {
    font-family: var(--headings-font-family);
}

Note that the variable is called using the keyword var().

Scope and inheritance of CSS custom properties

A little bit about the :root pseudo-class:

The :root CSS pseudo-class matches the root element of a tree representing the document. In HTML, :root represents the element and is identical to the selector html, except that its specificity is higher.

CSS custom properties are scope specific and support inheritance. That means if a CSS variable is declared on an selector like:

p {
    --p-color: #c00;
}

… the variable --p-color will only be available to p and their descendants. Thus the use of :root pseudo-class is used to declare the variables at the top-level. This comparable to declaring global variables. However trouble kicks in case the variable is not declared in the :root scope and is then accessed out of the scope. What then?

CSS variables support fallbacks

Fallbacks — that’s a plural.

h2 {
    font-family: var(--headings-font-family, Georgia, Times, serif);
}

So just in case the variable --headings-font-family is not accessible, the first fallback is ‘Georgia’ followed by ‘Times’ and ‘serif’ just like the good ‘ol days.

BTW, don’t pick on me for having used fallbacks on a font-stack declaration. You get the crux of it.

JavaScript Support for CSS variables

JavaScript does allow you to access the CSS custom properties. So you can use something along the lines of the following to access the values:

…getPropertyValue("--headings-font-family")

Summary

So there you have it: CSS variables, without too much fuss. Just keep a few things in mind:

1. CSS variables support inheritance.
2. CSS variables support fallbacks.
3. CSS variables are case-sensitive. Oh yes!
4. CSS variables must use valid CSS values. That means no concatenation of strings like var(--my-font-size)px
5. Combined with calc(), they unleash some serious awesomeness.
6. Keep an eye on browser support.