【发布时间】：2018-03-07 21:09:24
【问题描述】：
有没有办法使用 JavaScript 为 ie11 填充自定义 CSS 属性？ 我正在考虑加载，检查浏览器是否支持自定义属性，如果不支持，请对属性进行某种查找和替换。
这可以通过 JavaScript 或某些库实现吗？
谢谢
【问题讨论】：
标签： javascript css internet-explorer-11 css-variables
【发布时间】：2018-03-07 21:09:24
【问题描述】：
看看这个（我的）Custom-Properties-Polyfill：
https://github.com/nuxodin/ie11CustomProperties
工作原理
该脚本利用了 IE 具有最少的自定义属性支持这一事实，可以在考虑级联的情况下定义和读取属性。.myEl {-ie-test:'aaa'} // only one dash allowed "-"
然后用javascript阅读：getComputedStyle( querySelector('.myEl') )['-ie-test']
来自自述文件：
功能
- 处理动态添加的 html 内容
- 处理动态添加的元素
- 链接
--bar:var(--foo)- 后备
var(--color, blue)- ：焦点，：目标，：悬停
- js 集成：
style.setProperty('--x','y')style.getPropertyValue('--x')getComputedStyle(el).getPropertyValue('--inherited')- 内联样式：
<div ie-style="--color:blue"...- 级联作品
- 继承作品
- 低于 3k (min+gzip) 且无依赖
演示：
【讨论】：
您没有提到如何捆绑 JavaScript，但是是的，这是可能的。例如，PostCSS 有一个 plugin，它填充了这个特性。
用法取决于您捆绑脚本文件的方式。例如，使用 Webpack，你可以在你的 postcss 配置中定义这个插件，或者将它作为一个插件导入到你的 webpack 配置下：
// webpack.config.js:
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: ["style-loader", "css-loader", "postcss-loader"]
}
]
}
}
// postcss.config.js
module.exports = {
plugins: [
require('postcss-custom-properties'),
require('autoprefixer'),
// any other PostCSS plugins
]
}
该插件还有一个编程用法示例（作为单独的节点脚本）：
// dependencies
var fs = require('fs')
var postcss = require('postcss')
var customProperties = require('postcss-custom-properties')
// css to be processed
var css = fs.readFileSync('input.css', 'utf8')
// process css using postcss-custom-properties
var output = postcss()
.use(customProperties())
.process(css)
.css
【讨论】：
-
请注意，这不是 polyfill。 PostCSS 将包含自定义属性的 CSS 文件转换为不包含自定义属性的 CSS 文件。之后，您将转换后的 CSS 部署到网络服务器。
-
使用
preserve: true它将保留自定义属性并添加回退。但是 postcss-custom-properties 处理媒体查询中自定义属性的重新分配？
可以，只要您处理的是根级自定义属性 (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>和@importCSS- 将相对
url()路径转换为绝对 URL- 支持链接和嵌套
var()函数- 支持
var()函数后备值- 支持 web 组件/shadow DOM CSS
<link>和<style>更改时自动更新观看模式- UMD 和 ES6 模块可用
- 包括 TypeScript 定义
- 轻量级（6k min+gzip）且无依赖
限制
- 自定义属性支持仅限于
:root和:host声明- var() 的使用仅限于属性值（根据 W3C specification）
以下是该库可以处理的一些示例：
根级自定义属性
: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>
转换网络组件/影子 DOM
<custom-element>
#shadow-root
<style>
.my-custom-element {
color: var(--test-color);
}
</style>
<div class="my-custom-element">Hello.</div>
</custom-element>
为了完整起见：w3c specs
希望这会有所帮助。
（无耻的自我推销：检查）
【讨论】：
Webcomponents 库有 polyfills（除其他外）为 IE11 提供自定义属性/CSS 变量支持。请注意，整个库非常多，因为它还填充了自定义 HTML 元素、HTML 导入和影子 DOM。
【讨论】：