Workaround for CSS variables in IE?

Question

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 cro

Answer 1

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:
• cascade works
• inheritance works
• under 3k (min+gzip) and dependency-free

Demo:

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