JavaScriptを使用した特定のテクノロジーのブラウザーでサポートされているサポートの確認は、クライアント側の開発のベストプラクティスと見なされます（
多くの場合、ユーザーがページを表示しているブラウザーを確認するという別の方法を使用します-約 ）、しかし、残念ながら、そのような確認はできませんでしたCSSのみを使用して行われます。
Firefox 、
Chrome、および
Operaは最近、
@supportsおよび
CSS.supports （JavaScript）ディレクティブのCSSサポートを発表しました。これは、開発者がユーザーのブラウザーがCSSプロパティを処理できるかどうかを判断するのに役立ちます。 それらを実際に見てみましょう！
ブラウザを確認してください（碑文が緑色の場合、ブラウザは
@supportsサポートし、赤色の場合、
@supportsサポートします。ブラウザコンソールでメッセージを確認することもできます。）
CSS @supports
@supportsディレクティブの構文は、
@supportsクエリの構文と同じです。
@supports(prop:value) { }
@supportsディレクティブは、開発者にそれを使用するためのさまざまなオプションを提供します。
シンプルなプロパティチェック
@supports (display: flex) { div { display: flex; } }
これが最も簡単な使用方法です。
キーワードnot
@supportsは、プロパティのサポートが
notかどうかをチェックし
notという単語とペアになります。
@supports not (display: flex) { div { float: left; } }
複数のチェックと条件
ワードチェーン
or and
andを使用して、複数のチェックを実行できます。
@supports (display: -webkit-flex) or (display: -moz-flex) or (display: flex) { } @supports (display: flex) and (-webkit-appearance: caret) { }
いくつかの複数のチェックを実行する必要がある場合、多くのプログラミング言語のように、括弧を使用できます。
@supports ((display: -webkit-flex) or (display: -moz-flex) or (display: flex)) and (-webkit-appearance: caret) { }
@supports条件の構文は、
@supportsクエリの構文と同じです。
JavaScript CSS.supports
JavaScriptの
@supports対応する
@supportsは、
window.CSS.supportsメソッドです。 それを使用するための2つのオプションがあります。 1つ目は、プロパティとその値の2つの引数を渡すことです。
var supportsFlex = CSS.supports("display", "flex");
2番目のオプションでは、文字列全体を引数として渡す必要があります。
var supportsFlexAndAppearance = CSS.supports("(display: flex) and (-webkit-appearance: caret)");
JavaScriptアナログを使用する前に、まずこのテクノロジーのブラウザーサポートを確認することが重要です。 Operaは別のメソッド名を使用しているため、コードが少し増えます。
var supportsCSS = !!((window.CSS && window.CSS.supports) || window.supportsCSS || false);
@supportsを使用する
ほとんどの場合、
@supportsを使用する最良の方法は、特定のスタイルのバックアップセットを設定し、必要なプロパティがサポートされている場合は他のスタイルセットに置き換えることです。
@supportsを使用する大きな理由は、要素の場所を記述することです。 一部の新しいブラウザは
flexboxをサポートしてい
ますが 、他のブラウザは遅れています。 この場合、次のコードを記述できます。
section { float: left; } @supports (display: -webkit-flex) or (display: -moz-flex) or (display: flex) { section { display: -webkit-flex; display: -moz-flex; display: flex; float: none; } }
@supportsのその他の優れたユース
@supports例は、開発者がこの新しいテクノロジーの実験により多くの時間を費やした後に
@supportsます。
@サポート接続
@supportsような新しいテクノロジーを試してみたい場合は、最新バージョンのCanary、Firefox Nightly、またはOpera Nextのインストールに少し時間をかける必要があります。 Opera 12.1、WebKit Nightly、Firefox Nightlyはすべて
@supportsサポートしてい
@supports 。 Firefoxの古いバージョンは、
[layout.CSS.supports-rule.enabled]を含めた後に適切なサポートを提供します。
@supportsは、CSSおよびJavaScript仕様への歓迎すべき追加です。 特定のテクノロジーに対するブラウザーサポートの定義はベストプラクティスであり、
@supportsはさまざまなハックを使用するよりも便利で適切な方法です。 今後数年間で、
@supportsディレクティブの使用が急増する一方で、
@supportsの人気と利便性が高まると思われます。
便利なリンク
http://caniuse.com/css-featurequerieshttp://dev.w3.org/csswg/css-conditional/#at-supportsテクノロジーTwitterHabrのflexboxについて