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?