小编典典

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

css

我正在混合Web浏览器环境(Chrome/IE11)中开发网页。IE11不支持CSS变量,是否存在可以让我在IE11中使用CSS变量的polyfill或脚本?


阅读 1091

收藏
2020-05-16

共1个答案

小编典典

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

  • GitHub
  • NPM
  • 演示

从自述文件:

特征

  • 客户端将CSS自定义属性转换为静态值
  • 在现代和旧版浏览器中实时更新运行时值
  • 变换<link><style>@importCSS
  • 将相对url()路径转换为绝对URL
  • 支持链接和嵌套var()功能
  • 支持var()功能后备值
  • 支持Web组件/阴影DOM CSS
  • 观看模式会自动更新<link><style>更改
  • 提供UMD和ES6模块
  • 包含TypeScript定义
  • 轻量级(至少6k + 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>@importCSS

<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规格

希望这可以帮助。

2020-05-16