IE中CSS变量的解决方法？

Question

我目前正在 Outsystems 中开发一个 Web 应用程序，我需要在其中自定义 CSS，我在其中使用变量。我需要保证应用程序可以跨浏览器运行，包括在 Internet Explorer 中。 IE 不支持 CSS 变量，如下图 所示。

由于我必须使用 CSS 变量，在 IE 中使用变量是否有任何解决方法？

原文由 Rafael Valente 发布，翻译遵循 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 许可协议