javascript ie11 的 CSS 自定义属性 polyfill
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/46429913/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS custom properties polyfill for ie11
提问by user973671
Is there a way to pollyfill a custom CSS property for ie11 with JavaScript? I was thinking on load, check if browser supports custom properties and if not do some kind of find and replace on the properties.
有没有办法用 JavaScript 为 ie11 填充自定义 CSS 属性？我正在考虑加载，检查浏览器是否支持自定义属性，如果不支持对属性进行某种查找和替换。
Is this possible with JavaScript or some library?
这可以用 JavaScript 或某些库实现吗？
Thanks
谢谢
采纳答案by kano
You didn't mention how you're bundling your JavaScript, but yes, it's possible. For example, PostCSS has a plugin, which polyfills this feature.
您没有提到如何捆绑 JavaScript，但是是的，这是可能的。例如，PostCSS 有一个插件，它填充了这个特性。
The usage depends on how you're bundling your script files. With Webpack, for example, you'd define this plugin in your postcss config or import it as a plugin under your webpack config:
用法取决于您如何捆绑脚本文件。例如，使用 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
]
}
The plugin also has an example for programmatic usage (as a separate node script):
该插件还有一个用于编程使用的示例（作为单独的节点脚本）：
// 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
回答by Tobias Buschor
Have a look at this (my) Custom-Properties-Polyfill:
https://github.com/nuxodin/ie11CustomProperties
看看这个（我的）Custom-Properties-Polyfill：https:
//github.com/nuxodin/ie11CustomProperties
How it works
怎么运行的
The script makes use of the fact that IE has minimal custom properties support where properties can be defined and read out with the cascade in mind..myEl {-ie-test:'aaa'} // only one dash allowed "-"
then read it in javascript:getComputedStyle( querySelector('.myEl') )['-ie-test']
该脚本利用了这样一个事实，即 IE 具有最少的自定义属性支持，其中可以在考虑级联的情况下定义和读取属性。.myEl {-ie-test:'aaa'} // only one dash allowed "-"
然后在javascript中阅读它：getComputedStyle( querySelector('.myEl') )['-ie-test']
From the README:
从自述文件：
Features
- handles dynamic added html-content
- handles dynamic added , -elements
- chaining
--bar:var(--foo)- fallback
var(--color, blue)- :focus, :target, :hover
- js-integration:
style.setProperty('--x','y')style.getPropertyValue('--x')getComputedStyle(el).getPropertyValue('--inherited')- Inline styles:
<div ie-style="--color:blue"...- cascade works
- inheritance works
- under 3k (min+gzip) and dependency-free
特征
- 处理动态添加的 html 内容
- 处理动态添加的 , -elements
- 链接
--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) 且无依赖
Demo:
演示：
回答by jhildenbiddle
Yes, so long as you're processing root-level custom properties (IE9+).
是的，只要您正在处理根级自定义属性 (IE9+)。
- GitHub: https://github.com/jhildenbiddle/css-vars-ponyfill
- NPM: https://www.npmjs.com/package/css-vars-ponyfill
- Demo: https://codepen.io/jhildenbiddle/pen/ZxYJrR
- GitHub: https://github.com/jhildenbiddle/css-vars-ponyfill
- NPM：https: //www.npmjs.com/package/css-vars-ponyfill
- 演示：https: //codepen.io/jhildenbiddle/pen/ZxYJrR
From the README:
从自述文件：
Features
- Client-side transformation of CSS custom properties to static values
- Live updates of runtime values in both modern and legacy browsers
- Transforms
<link>,<style>, and@importCSS- Transforms relative
url()paths to absolute URLs- Supports chained and nested
var()functions- Supports
var()function fallback values- Supports web components / shadow DOM CSS
- Watch mode auto-updates on
<link>and<style>changes- UMD and ES6 module available
- TypeScript definitions included
- Lightweight (6k min+gzip) and dependency-free
Limitations
- Custom property support is limited to
:rootand:hostdeclarations- The use of var() is limited to property values (per W3C specification)
特征
- CSS 自定义属性到静态值的客户端转换
- 在现代和传统浏览器中实时更新运行时值
- 变换
<link>，<style>和@importCSS- 将相对
url()路径转换为绝对 URL- 支持链式和嵌套
var()函数- 支持
var()函数回退值- 支持 web 组件/shadow DOM CSS
- 观看模式自动更新
<link>和<style>更改- 提供 UMD 和 ES6 模块
- 包括 TypeScript 定义
- 轻量级（6k min+gzip）和无依赖
限制
- 自定义属性支持仅限于
:root和:host声明- var() 的使用仅限于属性值（根据W3C 规范）
Here are a few examples of what the library can handle:
以下是库可以处理的一些示例：
Root-level custom properties
根级自定义属性
:root {
--a: red;
}
p {
color: var(--a);
}
Chained custom properties
链式自定义属性
:root {
--a: var(--b);
--b: var(--c);
--c: red;
}
p {
color: var(--a);
}
Nested custom properties
嵌套的自定义属性
:root {
--a: 1em;
--b: 2;
}
p {
font-size: calc(var(--a) * var(--b));
}
Fallback values
回退值
p {
font-size: var(--a, 1rem);
color: var(--b, var(--c, var(--d, red)));
}
Transforms <link>, <style>, and @importCSS
变换<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>
Transforms web components / shadow DOM
转换 Web 组件/影子 DOM
<custom-element>
#shadow-root
<style>
.my-custom-element {
color: var(--test-color);
}
</style>
<div class="my-custom-element">Hello.</div>
</custom-element>
For the sake of completeness: w3c specs
为了完整起见：w3c 规范
Hope this helps.
希望这可以帮助。
(Shameless self-promotion: Check)
（无耻的自我推销：打勾）
回答by Peter
The Webcomponents library has polyfills that (among other things) provide custom property/CSS variables support to IE11. Note that the whole library is quite much, since it also polyfills custom HTML elements, HTML imports and shadow DOM.
Webcomponents 库有 polyfills（除其他外）为 IE11 提供自定义属性/CSS 变量支持。请注意，整个库相当多，因为它还填充了自定义 HTML 元素、HTML 导入和 shadow DOM。
https://www.webcomponents.org/polyfills
https://www.webcomponents.org/polyfills
