IE11-CSS变量是否存在polyfill /脚本?
我正在混合Web浏览器环境(Chrome/IE11)中开发网页。IE11不支持CSS变量,是否存在可以让我在IE11中使用CSS变量的polyfill或脚本?
回答:
是的,只要您正在处理根级自定义属性(IE9 +)。
- GitHub
- NPM
- 演示
从自述文件:
- 客户端将CSS自定义属性转换为静态值
- 在现代和旧版浏览器中实时更新运行时值
- 变换
<link>
,<style>
和@import
CSS - 将相对
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 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>
<custom-element> #shadow-root
<style>
.my-custom-element {
color: var(--test-color);
}
</style>
<div class="my-custom-element">Hello.</div>
</custom-element>
为了完整性:w3c规格
希望这可以帮助。
以上是 IE11-CSS变量是否存在polyfill /脚本? 的全部内容, 来源链接: utcz.com/qa/432028.html