web-dev-qa-db-ja.com

IE11のCSSカスタムプロパティポリフィル

JavaScriptを使用してIE11のカスタムCSSプロパティをポーリングフィルする方法はありますか？読み込み時に考えていましたが、ブラウザがカスタムプロパティをサポートしているかどうかを確認し、サポートしていない場合はプロパティを検索して置換します。

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

ありがとう

javascriptcss3internet-explorer-11css-variables
13
user973671

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
3
kano

はい、ルートレベルのカスタムプロパティのみを処理する必要がある限り。

詳細については、同様の質問に対する私の答えを参照してください： IE11-CSS変数のポリフィル/スクリプトは存在しますか？

4
jhildenbiddle

この（私の）Custom-Properties-Polyfillを見てください：
https://github.com/nuxodin/ie11CustomProperties

使い方

このスクリプトは、IEが最小限のカスタムプロパティをサポートし、カスケードを念頭に置いてプロパティを定義および読み出すことができるという事実を利用しています。
_.myEl {-ie-test:'aaa'} // only one dash allowed "-"_
次に、javascriptでそれを読みます。
getComputedStyle( querySelector('.myEl') )['-ie-test']

READMEから：

機能

  • 動的に追加されたhtmlコンテンツを処理します
  • 追加された動的な要素を処理します
  • チェーン--bar:var(--foo)
  • フォールバックvar(--color, blue)
  • ：focus、：target、：hover
  • js-integration：
    • style.setProperty('--x','y')
    • style.getPropertyValue('--x')
    • getComputedStyle(el).getPropertyValue('--inherited')
  • インラインスタイル：_<div ie-style="--color:blue"..._
  • カスケード作品
  • 相続作品
  • 3k（min + gzip）未満で、依存関係なし

デモ：

https://rawcdn.githack.com/nuxodin/ie11CustomProperties/b851ec2b6b8e336a78857b570d9c12a8526c9a91/test.html

2
Tobias Buschor

Webcomponentsライブラリには、（特に）IE11にカスタムプロパティ/ CSS変数のサポートを提供するポリフィルがあります。カスタムHTML要素、HTMLインポート、シャドウDOMもポリフィルされるため、ライブラリ全体が非常に多くなることに注意してください。

https://www.webcomponents.org/polyfills

https://github.com/WebComponents/webcomponentsjs

1
Peter