
Product
A New Overview in our Dashboard
We redesigned Socket's first logged-in page to display rich and insightful visualizations about your repositories protected against supply chain threats.
ie11-custom-properties
Advanced tools
A real Custom Properties polyfill for Internet Explorer 11.
Used on about 11'000 Live Websites
--bar:var(--foo)
var(--color, blue)
<style>
, <link>
-elementsstyle.setProperty('--x','y')
style.getPropertyValue('--x')
getComputedStyle(el).getPropertyValue('--inherited')
CSS.registerProperty({name:'--red', inherit:false, initialValue:'#e33'})
(of course not animatable)<div ie-style="--foo:bar"...
!important
on setters and gettersinherit
, initial
, unset
and revert
keyword for variablesYou only want IE11 to load the polyfill, use this snippet in the head of your html file, it just works:
<script>window.MSInputMethodContext && document.documentMode && document.write('<script src="https://cdn.jsdelivr.net/gh/nuxodin/ie11CustomProperties@4.1.0/ie11CustomProperties.min.js"><\x2fscript>');</script>
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:
header { --myColor:red; }
main { --myColor:green; }
li { color:var(--myColor); }
header { -ie-myColor:red; }
main { -ie-myColor:green; }
li { -ieHasVar-color:var(-ie-myColor); }
querySelectorAll('li').forEach(function(){
var color = getComputedStyle(this).getPropertyValue('--myColor');
// getPropertyValue is extended to handle custom properties
// draw_the_Element()
})
li.iecp-u1 { color:red; }
li.iecp-u2 { color:red; }
li.iecp-u3 { color:green; }
li.iecp-u4 { color:green; }
There is no way to get the raw content of style-attributes in IE11.
Use <div style="--color:blue" ie-style="--color:blue">
for this.
...is always little higher if vars are not served by root, because each selector gets an additional class-selector
eg. #header
results in #header.iecp_u44
See the tests
PRs welcome
FAQs
Custom Properties polyfill for IE11.
The npm package ie11-custom-properties receives a total of 2,379 weekly downloads. As such, ie11-custom-properties popularity was classified as popular.
We found that ie11-custom-properties demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
We redesigned Socket's first logged-in page to display rich and insightful visualizations about your repositories protected against supply chain threats.
Product
Automatically fix and test dependency updates with socket fix—a new CLI tool that turns CVE alerts into safe, automated upgrades.
Security News
CISA denies CVE funding issues amid backlash over a new CVE foundation formed by board members, raising concerns about transparency and program governance.