17

Chrome 安定版を含む一部のブラウザーでは、次のことができます。

h3 {
  -webkit-filter: grayscale(1);
  filter: grayscale(1);
}

ご存じないでしょうが、h1 は完全にグレースケールでレンダリングされます。古いものはすべて新しくなりました。

とにかく—これを機能検出する方法を知っている人はいますか?

うまくいかない場合は、他のスタイルを適用できる必要がありますfilter。

4

3 に答える 3

19

いわゆる更新された回答：

OPが良い点を述べたので、私は答えを更新していますが、これには以前の答えに関連するものや矛盾するものはありません。これは単なるブラウザの検出です。

Alan H. は、IE が 10 番目になる前に言及しました。バージョンはfiltercss プロパティをサポートしていますが、私たちが知っている方法ではありません (つまりCSS3 filter)。

したがって、 detect のみを機能させたい場合はCSS3 filter、先に進んで少しbrowser-detectionを使用する必要があります。コメントで述べたように。

プロパティを使用しdocumentMode、それを単純な機能検出と組み合わせることで、いわゆる IE の誤検知を除外できます。

function css3FilterFeatureDetect(enableWebkit) {
    //As I mentioned in my comments, the only render engine which truly supports
    //CSS3 filter is webkit. so here we fill webkit detection arg with its default
    if(enableWebkit === undefined) {
        enableWebkit = false;
    }
    //creating an element dynamically
    el = document.createElement('div');
    //adding filter-blur property to it
    el.style.cssText = (enableWebkit?'-webkit-':'') + 'filter: blur(2px)';
    //checking whether the style is computed or ignored
    //And this is not because I don't understand the !! operator
    //This is because !! is so obscure for learning purposes! :D
    test1 = (el.style.length != 0);
    //checking for false positives of IE
    //I prefer Modernizr's smart method of browser detection
    test2 = (
        document.documentMode === undefined //non-IE browsers, including ancient IEs
        || document.documentMode > 9 //IE compatibility moe
    );
    //combining test results
    return test1 && test2;
}

元の Modernizr ソース

if(document.body.style.webkitFilter !== undefined)

また

if(document.body.style.filter !== undefined)

追加情報：

簡単な機能検出には、上記のコードを使用してください。サポートされている機能のリストについては、こちらをご覧ください。

filterChrome での のライブ デモンストレーションについては、こちらをご覧ください。

さらに 2 つのリソースがあります。

私がこの回答を書いているとき、webkitそれを機能させるにはベンダープレフィックスを使用する必要があります。

于 2012-06-15T08:38:11.287 に答える
2

@Sepehrの回答を基に構築しますが、少し近代化し、余分な行を削除するには:

var supportsFilters = (function() {
  var filterEl = document.createElement('div');
  filterEl.style.cssText = 'filter:blur(2px)';
  return filterEl.style.length != 0 && (document.documentMode === undefined || document.documentMode > 9);
})();
于 2019-02-27T21:15:08.357 に答える