DEV Community

Discussion on: Don't miss out on css variables

Collapse
 
yevgalis profile image
yevgalis

CSS variables are great! Support is very good - all modern browsers support them. Well, except we know what browser 😅

Collapse
 
piotrk profile image
2pi.pl

From my point of view it's useless as long as IE11 is still used :(

Collapse
 
yevgalis profile image
yevgalis • Edited

In that case a lot of features are useless. Personally, if it's not absolutely necessary to support IE11 in a project, than I'm not thinking about it :)

Also you can provide (not always) a fallback for IE like this:

:root {
  --foreground-color: #333333;
  --background-color: #ffffff;
}

body {
  background: #ffffff;
  background: var(--background-color);
  color: #333333;
  color: var(--foreground-color);
}

Thread Thread
 
timdeschryver profile image
Tim Deschryver

That's a great tip, thanks for sharing!

Thread Thread
 
piotrk profile image
2pi.pl • Edited

Unfortunately about 8% of the web users are still using IE11 and other browsers not supporting css vars. It depends on your company's policy if you need to take care about those users or not - we have to :(
Of course - it's good to know about "new" things but using them it's unfortunately other thing.
This fallback is good for simple cases, but if you'd like to change the value of the --background-color using javascript, simply changing the --background-color variable the colors won't change it in IE.

Thread Thread
 
yevgalis profile image
yevgalis

I understand that the fallback I mentioned before is not gonna solve the inability to change CSS variables using JS. It just can be used for simple cases.

It's sad that we still have to support IE11. Microsoft created a burden for the web community. And IE11 is holding back the progress :(

But on the other hand, imagine the day when IE11 will be gone! It's gonna be the biggest worldwide party in the history :D