我正在混合Web浏览器环境(Chrome/IE11)中开发网页。IE11不支持CSS变量,是否存在可以让我在IE11中使用CSS变量的polyfill或脚本?
是的,只要您正在处理根级自定义属性(IE9 +)。
从自述文件:
特征
<link>
<style>
@import
url()
var()
局限性
:root
:host
以下是库可以处理的一些示例:
根级自定义属性
: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规格
希望这可以帮助。