document.documentElement.style.setProperty('--some-color', 'green') does not work in IE

Question

I have a custom css variable declared in a separate css file in a selector.

.ui-grid-row:nth-child(odd) {
background-color: var(--altbg-color) !important;
}

This is not a root element. So not sure how css-vars-ponyfill will work in this case. I have tried that too but could not make it work. (I would be grateful if somebody can help me make it work.)

I am trying to set value to the variable through javascript (I am using AngularJS 1.3) using

document.documentElement.style.setProperty('--some-color', 'green')

which works fine with Chrome & Firefox but not in IE(11).

Does anybody have a solution?

Thanks in advance.

Possible duplicate of [IE11 - does a polyfill / script exist for CSS variables?](https://stackoverflow.com/questions/46429937/ie11-does-a-polyfill-script-exist-for-css-variables) — georgeawg, Mar 18 '19 at 18:07

Bhojendra Rauniyar · Accepted Answer · 2019-03-18T17:21:41.410

2

It is not supported in IE 11.

You can only use CSS variables from IE edge 16 and above. However, it's partially supported in IE 15.

In Edge 15, nested calculations with css variables are not computed and are ignored see bug
In Edge 15 animations with css variables may cause the webpage to crash see bug
In Edge 15 is not possible to use css variables in pseudo elements see bug

Though, there's a polyfill for this:

https://www.npmjs.com/package/css-vars-ponyfill

This doesn't support IE edge 11. It starts supporting IE edge 12+. And without edge, it starts supporting from IE 9.

IE  Edge    Chrome  Firefox Safari
----------------------------------
9+  12+     19+     6+      6+

edited Mar 18 '19 at 17:21

answered Mar 18 '19 at 17:10

Bhojendra Rauniyar

83,432
35
168
231

Any chance using css-vars-ponyfill? https://www.npmjs.com/package/css-vars-ponyfill – Pankaj Pawar Mar 18 '19 at 17:19
No. It does not. Updated my answer. – Bhojendra Rauniyar Mar 18 '19 at 17:23
However, you may file a bug or issue in that polyfill and if the author thinks to provide the solution for IE edge 11, then you'll be lucky. – Bhojendra Rauniyar Mar 18 '19 at 17:27
Here is a real polyfill that enables almost full support of CSS variables in IE11: https://github.com/nuxodin/ie11CustomProperties – Hans Gustavson Sep 10 '19 at 15:51

score 0 · Answer 2 · answered Jan 13 '20 at 06:39

There is a polyfill, which enables almost complete support for CSS variables in IE11, including JS-integration:
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']

Demo:

https://rawcdn.githack.com/nuxodin/ie11CustomProperties/ed6a269145661bfc6a43a5b69f06248fa760e766/demo.html

document.documentElement.style.setProperty('--some-color', 'green') does not work in IE

2 Answers2

Demo: