Skip to content
CSS variables (Custom Properties) polyfill for IE11
JavaScript HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
LICENSE Create LICENSE Jul 8, 2019
README.md Update README.md Jan 13, 2020
demo.html add tests Dec 19, 2019
ie11CustomProperties.js new parser for css-values Jan 20, 2020
package.json
tests.html new parser for css-values Jan 20, 2020

README.md

CSS Variables for IE11

A real Custom Properties polyfill for IE11.
Used on about 9000 Live Websites

See the demo!

New in v2.7.2: Great performance improvement

It can:

  • chaining --bar:var(--foo)
  • fallback var(--color, blue)
  • :focus, :target, :hover
  • handle dynamic added html-content
  • handle dynamic added <style>, <link>-elements
  • js-integration:
    • style.setProperty('--x','y')
    • style.getPropertyValue('--x')
    • getComputedStyle(el).getPropertyValue('--inherited')
  • Houdini’s new API: CSS.registerProperty({name:'--red', inherit:false, initialValue:'#e33'}) (of course not animatable)
  • style-attributes <div ie-style="--foo:bar"...
  • cascade works
  • inheritance works
  • !important on setters and getters
  • SVG-support
  • media-queries (redraw on media-changes)
  • transform relative to absolute urls
  • under 3k (min+gzip) and dependency-free

Ussage

You only want IE11 to load the polyfill, use this snipped in the head of your html file, it then just works:

<script>window.MSInputMethodContext && document.documentMode && document.write('<script src="yourJsPath/ie11CustomProperties.js"><\x2fscript>');</script>

Help wanted!

How it works

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. This is not possible with properties starting with double dashes. .myEl {-ie-test:'aaa'} // only one dash allowed! "-" then you can read it in IE with javascript: getComputedStyle( querySelector('.myEl') )['-ie-test'] In the raw CSS, it replaces for example --foo with -ie-foo. It searches for all rules containing variable getters and setter, remembers the affected selectors so future affected Elements can be found in a mutation observer. Each affected Element gets a uniq class-attribute and its own style-sheet to draw the Element. These are the steps that the script does:

  1. given the CSS
header { --myColor:red; }
main { --myColor:green; }
li { color:var(--myColor); }
  1. rewritten CSS
header { -ie-myColor:red; }
main { -ie-myColor:green; }
li { -ieHasVar-color:var(-ie-myColor); }
  1. find all affected Element and get its property-values
querySelectorAll('li').forEach(function(){
    var color = getComputedStyle(this).getPropertyValue('--myColor');
    // getPropertyValue is extended to handle custom properties
    // draw_the_Element()
})
  1. draw Elements, this leads in separate rules for each Element
li.iecp-u1 { color:red; }
li.iecp-u2 { color:red; }
li.iecp-u3 { color:green; }
li.iecp-u4 { color:green; }

custom-properties-ie11.png

Small limitations

styles in element-attributes

There is no way to get the raw content of style-attributes in IE11. Use <div style="--color:blue" ie-style="--color:blue"> for it

specificity for properties containing "var()"

...is always little highter if vars are not served by root, cause each selector gets an additional class-selector eg. #header results in #header.iecp_u44

Tests

See the tests
PRs welcome

You can’t perform that action at this time.