CSSプロパティブラウザがサポートしているかどうかをJSが検出するための複数の方法

1.ネイティブCSS.supports構文

常に方法があります

ブール値を返すtrueか、false特定のCSSプロパティがサポートされているかどうかをチェックします。

文法

CSS.supports（propertyName、value）; 
CSS.supports（supportCondition）;

パラメータ

プロパティ名

ストリング。検出するCSSプロパティの名前。

値

ストリング。検出に使用されるCSSプロパティ値。

supportCondition

ストリング。検出に使用されるCSS宣言、式、または文法。

場合

たとえば、ブラウザがCSSフィルタをサポートしているかどうかを検出するには、次のことができます。

result = CSS.supports（ 'filter'、 'blur（5px）'）; 
result = CSS.supports（ 'filter：5px'）; //構文が間違っている、falseを返す

たとえば、Chromeブラウザで戻ります。

CSS.supportsフィルターサポート検出

CSS.supports()また、CSS変数構文などの式を検出するためにも使用できます。

結果= CSS.supports（ '-username：zhangxinxu'）; 
結果= CSS.supports（ '（-username：zhangxinxu）'）;

結果を以下に示します。

CSS.supportsはCSS変数を検出します

ブラケットがサポートされているかどうかを確認できます。

CSS.supports()また@supports、次のようなルールと論理式もサポートしています。

結果= CSS.supports（ 'width：fit-contentまたはwidth：-webkit-fit-content'）; 
結果= CSS.supports（ '（幅：fit-content）または（幅：-webkit-fit-content）'）;

最初の行（ピンクのテキスト）はfalseを返し、2行目はtrueを返すことをサポートしています（下の図を参照）。この文法環境では、角かっこが必要であることがわかります。

ロジックルールステートメントはテストをサポートします

互換性

CSS@supportsルールの互換性と同様に、Edge12 +はそれをサポートしています。

CSSはAPI互換性をサポートしています

ぎこちない現状

実際の開発では、CSS検出シナリオを使用する必要があります。これは通常、IE9〜IE11などの低バージョンのIEブラウザー用です。

そのため、恥ずかしいことが起こりました。IEブラウザーの下位バージョンは、ブラウザーでネイティブにサポートされているCSS.supports()メソッドをサポートしていません。したがって、この新しいAPIのために実際のニーズは解決されておらず、他のメソッドに頼る必要があります。

2つ目は、JSの割り当て、次に値の検出方法です。

これは私が実際のプロジェクトでよく使う方法です。原理はとてもシンプルです。ブラウザが特定のCSSプロパティをサポートしていない場合、強制的に設定しても、得られる計算値は設定したプロパティ値にはなりません。例ブラウザがCSSフィルターをサポートしているかどうかを確認します。

私はそれを次のように扱います：

document.head.style.filter = 'blur（5px）'; 
結果= window.getComputedStyle（document.head）.filter == 'blur（5px）';

実際のブラウザでの上記のコードのパフォーマンスを見てみましょう。最初はサポートされているChromeブラウザです。result値はtrue次のとおりです。

Chromeブラウザのスクリーンショット

その場合、IE11ブラウザーはサポートされません。result値はfalse次のとおりです。

IE11のスクリーンショット

このメソッドの原理は非常に単純で、互換性は非常に優れています。実装の重要なポイントは、IE9 +でサポートされているDOMAPIメソッドであるgetComputedStyleを使用することdom.style.xxxxです。直接アクセスは使用できません。

プライベートプレフィックスなど、orまたはandに類似したロジックを実装する場合は、次のように処理して、主要部分を一致させることができます。

document.head.style.width = 'fit-content'; 
document.head.style.width = '-moz-fit-content'; 
結果= / fit-content / .test（window.getComputedStyle（document.head）.width）;

たとえば、Firefoxブラウザでの結果は次のとおりです。

Firefoxブラウザのスクリーンショット

互換性

IE9 +

注意点

getComputedStyle()このメソッドは計算値を返しますが、これは多くの場合、設定されたプロパティ値とは異なります。

たとえば、行の高さが10進数に設定されている場合、ピクセルの計算値はIEブラウザで返されます。

または、background属性値を設定すると、結果は背景の兄弟と家族の値になります。

document.head.style.background = 'paint（abc）'; 
結果= / paint / .test（window.getComputedStyle（document.head）.background）; 
//結果值是真
window.getComputedStyle（document.head）.background 
// "rgba（0、0、0、0）paint（abc）repeat scroll 0％0％/ auto padding-boxborder-box"

返されるのはコレクションです

あいまいマッチングを使用する必要があります。

3、他の方法

コアアイデアは似ています：

document.head.setAttribute（ 'style'、 'filter：blur（5px）'）; 
結果= !! document.head.style.filter;

ChromeとIEでの検証テスト結果の図：

Chrome下

IEブラウザで

結論として

互換性に関係なく、CSSを検出してCSS.supports()使用する方法は、IEブラウザーが割り当て方法を使用していることを検出することです。

他のメソッドを追加することを歓迎します。