IE11 - CSS 变量是否存在 polyfill / 脚本？

Question

我正在混合网络浏览器环境（Chrome/IE11）中开发网页。 IE11 不支持 CSS 变量，是否存在允许我在 IE11 中使用 CSS 变量的 polyfill 或脚本？

原文由 R. StackUser 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

是的，只要您正在处理根级自定义属性 (IE9+)。

• GitHub ： https ://github.com/jhildenbiddle/css-vars-ponyfill
• NPM ： https ://www.npmjs.com/package/css-vars-ponyfill
• 演示： https ://codepen.io/jhildenbiddle/pen/ZxYJrR

从自述文件：

特征

• CSS 自定义属性到静态值的客户端转换
• 现代和旧版浏览器中运行时值的实时更新
• 转换 <link> 、 <style> 和 @import CSS
• 将相对 url() 路径转换为绝对 URL
• 支持链式嵌套 var() 函数
• 支持 var() 函数后备值
• 支持 web 组件/shadow DOM CSS
• 观看模式自动更新 <link> 和 <style> 更改
• 提供 UMD 和 ES6 模块
• 包括 TypeScript 定义
• 轻量级（6k min+gzip）且无依赖

限制

• 自定义属性支持仅限于 :root 和 :host 声明
• var() 的使用仅限于属性值（根据 W3C 规范）

以下是该库可以处理的一些示例：

根级自定义属性

:root {
    --a: red;
}

p {
    color: var(--a);
}

链式自定义属性

:root {
    --a: var(--b);
    --b: var(--c);
    --c: red;
}

p {
    color: var(--a);
}

嵌套自定义属性

:root {
    --a: 1em;
    --b: 2;
}

p {
    font-size: calc(var(--a) * var(--b));
}

后备值

p {
    font-size: var(--a, 1rem);
    color: var(--b, var(--c, var(--d, red)));
}

转换 <link> 、 <style> 和 @import CSS

 <link rel="stylesheet" href="/absolute/path/to/style.css">
<link rel="stylesheet" href="../relative/path/to/style.css">

<style>
    @import "/absolute/path/to/style.css";
    @import "../relative/path/to/style.css";
</style>

转换 Web 组件/影子 DOM

 <custom-element>
  #shadow-root
    <style>
      .my-custom-element {
        color: var(--test-color);
      }
    </style>
    <div class="my-custom-element">Hello.</div>
</custom-element>

为了完整起见： w3c 规范

希望这可以帮助。

（无耻的自我推销：检查）

原文由 John Hildenbiddle 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

这个 polyfill 几乎完全支持 IE11 中的自定义属性（ 不仅是根级别）：

https://github.com/nuxodin/ie11CustomProperties

怎么运行的

该脚本利用了 IE 具有最小自定义属性支持的事实，其中可以在考虑级联的情况下定义和读出属性。

.myEl {-ie-test:'aaa'} // only one dash allowed! "-"

然后用javascript阅读它：

getComputedStyle( querySelector('.myEl') )['-ie-test']

自述文件的特点：

• 处理动态添加的 html 内容
• 处理动态添加的 <style> , <link> 元素
• 链接 --bar:var(--foo)
• 回退 var(--color, blue)
• ：焦点，：目标，：悬停
• js-集成：
  • style.setProperty('--x','y')
  • style.getPropertyValue('--x')
  • getComputedStyle(el).getPropertyValue('--inherited')
• 内联样式： <div ie-style="--color:blue"...
• 级联工程
• 继承作品
• 小于 3k (min+gzip) 且无依赖

演示：

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

原文由 Tobias Buschor 发布，翻译遵循 CC BY-SA 4.0 许可协议