DEV Community

CSS variables are great!

Jérôme Pott on November 29, 2018

Declaring a new variable You can define CSS variables anywhere in your stylesheets, but you usually want to have them declared in the ro...
Collapse
 
hellokyyt profile image
Kyle Harrison

Wait, so what's the browser compatibility with this?

As much as I love SCSS, and I do, if I don't have to use it anymore in place of standard css, that's ideal

Collapse
 
mornir profile image
Jérôme Pott

CSS variables are supported in all modern browsers.
For Internet Explorer, I usually use a fallback value:

.main-header {
 background-color: red;
 background-color: var(--main-color);
}

But then, of course, updating value at runtime won't work in IE. I think that this fallback is sufficient when the changes are only cosmetic.

Collapse
 
nuxodin profile image
Tobias Buschor

For Internet Explorer, you can try this polyfill:
github.com/nuxodin/ie11CustomPrope...
It enables nearly full custom properties support for it.

Collapse
 
ikbensiep profile image
Sibrand Hoekstra

Support is not too shabby: developer.mozilla.org/en-US/docs/W...

Collapse
 
mattcosta7 profile image
Matthew Costabile

That's support for setProperty itself, not support for cash variables, which won't work with setProperty (or at all on ie without polyfilling - and the best polfyills only support initial evaluation)

Thread Thread
 
ironydelerium profile image
ironydelerium

caniuse.com/#feat=css-variables

So, aside from IE, if your browser is less than a year old (2 years, at least, if you exclude Edge), CSS variables work.

Collapse
 
zerquix18 profile image
I'm Luis! \^-^/

I didn't know this was a thing. Thanks!

Collapse
 
deignouze profile image
Christophe Coeur

I was not aware of this trick too, great article !