如何在 Internet Explorer 11 中使用 CSS 变量？

IE11 中的 CSS 变量兼容性

CSS 变量提供了一种在 CSS 代码中定义和重用变量的便捷方法，但它们本身并不是Internet Explorer 11 (IE11) 支持。这给需要在应用程序中支持旧版浏览器的开发人员带来了挑战。

解决方案：CSS 变量 Ponyfill

幸运的是，有一个以下形式的解决方案：一个名为 CSS Variables Ponyfill 的 polyfill。该库允许您在 IE11 和其他本身不支持 CSS 的浏览器中使用 CSS 变量。

特性和功能

CSS 变量 Ponyfill 提供了广泛的功能，包括：

• 客户端将 CSS 自定义属性转换为静态值
• 现代和旧版浏览器中运行时值的实时更新
• 、
• 支持链式和嵌套 var() 函数
• 支持 var() 函数回退值
• 支持 Web 组件/影子 DOM CSS
• 上的观看模式自动更新和更改
• 轻量级（6k min gzip）且无依赖

用法

要使用 CSS 变量 Ponyfill，只需将其包含在您的HTML 文档位于任何其他 CSS 之前文件：

<script src="https://unpkg.com/css-vars-ponyfill/dist/css-vars-ponyfill.min.js"></script>

示例

以下是一些如何使用 CSS 变量 Ponyfill 在 IE11 中创建和使用 CSS 变量的示例：

根级自定义属性

: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));
}

通过使用 CSS 变量 Ponyfill，您可以利用 CSS 变量的优势IE11 并确保您的网页在所有支持的浏览器中一致呈现。

以上是如何在 Internet Explorer 11 中使用 CSS 变量？的详细内容。更多信息请关注PHP中文网其他相关文章！