Use CSS-Variable even in IE11

栏目: IT技术 · 发布时间: 4年前

内容简介:A real Custom Properties polyfill for Internet Explorer 11.Used on about 10'000

CSS Variables Polyfill for IE11

A real Custom Properties polyfill for Internet Explorer 11.

Used on about 10'000 Live Websites

See the demo!

New in v2.7.2: Great performance improvement

Features

  • chaining --bar:var(--foo)
  • fallback var(--color, blue)
  • :focus, :target, :hover
  • handle dynamically added html-content
  • handle dynamically 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
  • inherit , initial , unset and revert keyword for variables
  • SVG support
  • media-queries (redraw on media-changes)
  • transform relative to absolute urls
  • under 4k (min+gzip) and dependency-free

Usage

You only want IE11 to load the polyfill, use this snippet 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 Elements and get their 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; }

Use CSS-Variable even in IE11

Small limitations

Styles in element-attributes

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

Specificity for properties containing "var()"

...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

Tests

See the tests

PRs welcome


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Algorithms + Data Structures = Programs

Algorithms + Data Structures = Programs

Niklaus Wirth / Prentice Hall / 1975-11-11 / GBP 84.95

It might seem completely dated with all its examples written in the now outmoded Pascal programming language (well, unless you are one of those Delphi zealot trying to resist to the Java/.NET dominanc......一起来看看 《Algorithms + Data Structures = Programs》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

RGB转16进制工具
RGB转16进制工具

RGB HEX 互转工具

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具