ie11のCSSカスタムプロパティpolyfill

Question

JavaScriptでie11のカスタムCSSプロパティをポリラインで埋め込む方法はありますか？ 私はロードを考えていました。ブラウザがカスタムプロパティをサポートしているかどうかをチェックし、そうでない場合はプロパティを検索して置き換えます。

これはJavaScriptやライブラリで可能ですか？

おかげ

Answer 1

あなたは、あなたのJavaScriptをバンドルしているかについては言及しなかったが、はい、それは可能です。たとえば、PostCSSにはpluginがあり、この機能はポリフィリングされます。

使用方法は、スクリプトファイルのバンドル方法によって異なります。 WebPACKのでは、たとえば、あなたはあなたのpostcssの設定でこのプラグインを定義したいか、あなたのWebPACKのconfigの下にプラグインとしてそれをインポートします。

// 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ライブラリには、（特に）カスタムプロパティ/ CSS変数サポートがIE11に提供されるポリフィルがあります。ライブラリ全体は、カスタム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?