有没有办法使用 JavaScript 为 ie11 填充自定义 CSS 属性？我正在考虑加载，检查浏览器是否支持自定义属性，如果不支持，请对属性进行某种查找和替换。
这可以通过 JavaScript 或某些库实现吗？
谢谢
问问题
19223 次
4 回答
18
看看这个（我的）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)- :focus, :target, :hover
- js集成：
style.setProperty('--x','y')style.getPropertyValue('--x')getComputedStyle(el).getPropertyValue('--inherited')- 内联样式：
<div ie-style="--color:blue"...- 级联工程
- 继承作品
- 低于 3k (min+gzip) 且无依赖
演示：
于 2019-07-01T05:58:10.683 回答
7
您没有提到如何捆绑 JavaScript，但是是的，这是可能的。例如，PostCSS 有一个插件，它填充了这个特性。
用法取决于您捆绑脚本文件的方式。例如，使用 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
于 2017-10-01T19:22:42.590 回答
4
是的，只要您正在处理根级自定义属性 (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 规范）
以下是该库可以处理的一些示例：
根级自定义属性
: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 规范
希望这可以帮助。
（无耻的自我推销：检查）
于 2018-03-09T23:55:55.420 回答
1
Webcomponents 库有 polyfills（除其他外）为 IE11 提供自定义属性/CSS 变量支持。请注意，整个库非常多，因为它还填充了自定义 HTML 元素、HTML 导入和影子 DOM。
于 2018-01-23T10:24:24.117 回答