ie11的CSS自定义属性填充

Question

有没有办法使用JavaScript为ie11 pollyfill自定义CSS属性？ 我一直在考虑加载，检查浏览器是否支持自定义属性，如果不在属性上进行某种查找和替换。

这是可能与JavaScript或某些图书馆？

谢谢

Answer 1

你没有提到你如何捆绑你的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 

Answer 2

Webcomponents库具有polyfills（除其他外）为IE11提供自定义属性/ CSS变量支持。请注意，整个库非常多，因为它也可以填充自定义HTML元素，HTML导入和阴影DOM。

https://www.webcomponents.org/polyfills

https://github.com/WebComponents/webcomponentsjs

Answer 3

是的，只要你只需要处理根级定制属性。

• https://github.com/jhildenbiddle/css-vars-ponyfill

见我的回答类似的问题更多详情：IE11 - does a polyfill/script exist for CSS variables?