🈺 👔 ⛪️ 新しいCSS @supportsディレクティブ ☦️ 🔠 🎢

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

を使用して、複数のチェックを実行できます。

 /* or */ @supports (display: -webkit-flex) or (display: -moz-flex) or (display: flex) { /*      */ } /* and */ @supports (display: flex) and (-webkit-appearance: caret) { /*     */ }

いくつかの複数のチェックを実行する必要がある場合、多くのプログラミング言語のように、括弧を使用できます。

 /* and and or */ @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-featurequeries

http://dev.w3.org/csswg/css-conditional/#at-supports

テクノロジーTwitter

Habrのflexboxについて

新しいCSS @supportsディレクティブ