DEV Community

Discussion on: CSS variables are great!

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 Author

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.