Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Workaround for CSS variables in IE?

I'm currently developing a web application in Outsystems in which I have the need to customize the CSS, in which I'm using variables. I need to guarantee the app works cross-browser, including in Internet Explorer. IE doesn't support CSS variables, as you can see in the picture below from this source.

Since I have to use CSS variables, is there any workaround for the usage of variables in IE?

like image 318
Rafael Valente Avatar asked Aug 30 '17 08:08

Rafael Valente


People also ask

How do I make CSS variables work in IE?

Note: CSS variables are not and won't be supported in IE11. You can either create a static stylesheet for all UA browsers or decide to leverage them in most UA browsers + use a JS fallback for IE11 if you want to support this browser – you can test for CSS variables support in JS.

Do all browsers support CSS variables?

CSS variables are currently supported for 93 percent of users globally. If a browser doesn't support CSS variables, it also doesn't understand the var() function, and doesn't know what its second argument means. Instead, we need to use the cascade, as we do for every new CSS feature.

Does Microsoft EDGE support CSS variables?

CSS Variables (Custom Properties) element is not supported by Microsoft Edge browser 12 to 14.

Can I import CSS variables?

Now, when we wrote all our CSS variables we can import them. Because we import variables in the :root we can import them just once in our common stylesheet style. scss . And then we can use these variables without import in other files that will be imported among common styles.


2 Answers

Yes there is a way, the same way you make any css compatible: use a specific css fallback that is supported by the browser.

body {   --text-color: red; }  body {   color: red; /* default supported fallback style */   color: var(--text-color); /* will not be used by any browser that doesn't support it, and will default to the previous fallback */ } 

This solution is incredibly redundant and 'almost' defeats the purpose of css variables....BUT it is necessary for browser compatibility. Doing this would essentially make the css variables useless but I implore you to still use them because it will serve as an important reminder to the fact that these values are referenced elsewhere and need to be updated in all cases, otherwise you forget to update every related occurrence of 'color' and then you have inconsistent styling because relevant css values are out of sync. The variable will serve more as a comment but a very important one.

like image 111
Mohammed Siddeeq Avatar answered Sep 22 '22 07:09

Mohammed Siddeeq


There is a polyfill, which enables almost complete support for CSS variables in IE11:
https://github.com/nuxodin/ie11CustomProperties
(i am the author)

The script makes use of the fact that IE has minimal custom properties support where properties can be defined and read out with the cascade in mind.
.myEl {-ie-test:'aaa'} // only one dash allowed! "-"
then read it in javascript:
getComputedStyle( querySelector('.myEl') )['-ie-test']

From the README:

Features

  • handles dynamic added html-content
  • handles dynamic added , -elements
  • chaining --bar:var(--foo)
  • fallback var(--color, blue)
  • :focus, :target, :hover
  • js-integration:
    • style.setProperty('--x','y')
    • style.getPropertyValue('--x')
    • getComputedStyle(el).getPropertyValue('--inherited')
  • Inline styles: <div ie-style="--color:blue"...
  • cascade works
  • inheritance works
  • under 3k (min+gzip) and dependency-free

Demo:

https://rawcdn.githack.com/nuxodin/ie11CustomProperties/b851ec2b6b8e336a78857b570d9c12a8526c9a91/test.html

like image 26
Tobias Buschor Avatar answered Sep 20 '22 07:09

Tobias Buschor