CSS VARIABLES: USAGE AND BROWSER COMPATIBILITY HACK

You probably must have used CSS variables before now or maybe not. If you have used CSS variables before, you could have experienced some browser compatibility issues especially when you have to support users using Internet Explorer. I know, I can relate, it can be a pain😢 but you have to deal with it as a dev. In this article, I intend to introduce CSS variables and also share the solution I found for browser compatibility issues when using CSS variables. Whatever your level of acquaintance with CSS variables is, I believe you would have fun reading and learning while I share what I have learnt.

Before I proceed, I will like you to note that the terms CSS variables and CSS custom properties/custom properties are synonymous, and would be used interchangeably throughout this article.

CSS Variables Explained

The concept of variable in CSS is similar to the concept of variable in many programming languages. CSS variable is a way of storing CSS values for reuse elsewhere on a stylesheet. It makes it easier to apply the values to a property and also change the values without having to look for where they are on your stylesheet, thus, making your code clean and understandable.

Declaring A Variable

The naming concept for a custom property is to begin a property name with a double hyphen -- and a property value in a ruleset.

:root {
    --primary-color: #c4c4c4;
}

The common practice is to use the :root pseudo-class which is the root element of a tree representing the document, thus, making it globally available. However, you can choose to scope the custom property.

.hero {
    --primary-color: #c4c4c4;
}

In the above example, --primary-color is scoped to the hero class. Scoping a custom property limits its availability to CSS selectors other than the one it was declared for.

Usage

Now that we are done declaring the variable, the next thing would be to use the already declared variable. To use the variable, you need to add the custom property name inside the var() function for use as a property value.

p {
    color: var(--primary-color); 
}

div {
    background-color: var(--primary-color);
    border: 1px dashed var(--primary-color);
}

Fallbacks can be created in case something goes wrong as a result of your browser not being able to find the custom property.

div {
    background-color: var(--primary-color, #c4c4c4);
}

In the above example, the color code #c4c4c4 after the comma is the fallback value that would be used if --primary-color is not available.

Fixing Browser Compatibility Issue

On caniuse.com, the browser that doesn’t have support for var() is Internet Explorer, so this hack is for (IE) Internet Explorer. The browser compatibility issue can be resolved with the polyfill created by @nuxodin.

Just add this script tag to your HTML

<script>window.MSInputMethodContext && document.documentMode && document.write('<script src="https://cdn.jsdelivr.net/gh/nuxodin/ie11CustomProperties@4.1.0/ie11CustomProperties.min.js"><\/script>');</script>

...and that’s it, it’s done 🎉. The compatibility issue is fixed. This support is for IE11.

Bonus

There’s another solution created by @jhildenbiddle, this is not a polyfill but a ponyfill.

To install it, add this script tag to your HTML

<script src="https://cdn.jsdelivr.net/npm/css-vars-ponyfill@2"></script>

Or use npm

npm install css-vars-ponyfill

then import it

import cssVars from 'css-vars-ponyfill';

Its usage

Because it's a ponyfill, a function must be called in order for processing to take place.

/* In your js file */

cssVars({
  rootElement   : document
});

…this does the magic✨. This supports IE 9+

Thanks for taking out time to read this article. I hope it has been helpful? When working on your next project and you are not using any preprocessor like Sass or Less, you can always use CSS custom properties/variables and the highlighted polyfill and ponyfill to take care of the browser compatibility issue. See you later✌️.