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
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.
For Internet Explorer, you can try this polyfill: github.com/nuxodin/ie11CustomPrope... It enables nearly full custom properties support for it.
Support is not too shabby: developer.mozilla.org/en-US/docs/W...
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)
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.
Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink.
Hide child comments as well
Confirm
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
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
CSS variables are supported in all modern browsers.
For Internet Explorer, I usually use a fallback value:
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.
For Internet Explorer, you can try this polyfill:
github.com/nuxodin/ie11CustomPrope...
It enables nearly full custom properties support for it.
Support is not too shabby: developer.mozilla.org/en-US/docs/W...
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)
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.