on:2019年3月1日sponsorsCSSの@supportsは機能クエリと呼ばれ、CSSの特定のプロパティやプロパティと値の組み合わせがブラウザにサポートされているかチェックするための機能です。言い換えると、条件分岐でスタイルを適用することができます。そんな便利な@supportsの基礎知識と実践的な使い方、そして古い使い方や実は役に立っていない使い方などを紹介します。Works下記は各ポイントを意訳したものです。※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。はじめに@supportsの古い活用事例@supportsにnotがあるけれど、常に使用するべきという意味ではない@supportsのサポートブラウザ@supportsが何の役にも立たない使い方@supportsで遊ぶための拡張機能@supportsのより現実的な活用事例@supportsのロジックJavaScriptでの変形セレクタのサポートをチェック終わりにはじめにCSSにはスタイルを適用する前に、特定のプロパティやプロパティと値の組み合わせがサポートされているかチェックするための機能があります。この機能は@supportsと呼ばれ、下記のようなコードを使用します。grid;}}この機能を使う際は、少し慎重さを要します。個人的には、必要ではない時もあると思います。CSSはブラウザがプロパティや値の組み合わせを理解できない場合はそれらを無視し、何かがあればそれより前に宣言されたものを使用するというフォールバックのメカニズムを持っています。この機能はフォールバックを処理するために使用することができ、最終的な結果は冗長ではありません。確かに、ブラウザごとに同じことをしているわけではありませんが、同様に手の込んだフォールバックを書くわけでもありません。言っても、@supportsには活用事例が確実にあります。私がこの記事を書いている間に見つけた数多くの活用事例を紹介します。前述したコードは単なる例で、実際には多くのコードを書くのが普通です。Gridは優れた機能を備えていますが、サポートしていないブラウザもあります。iOSはバージョン10.2でGridをサポートしましたが、バージョン7以降はFlexboxをサポートしています。これは、FlexboxはサポートしているがGridはサポートしていない古いiOSを使用している人にとっては、かなりのギャップです。私はそのようなギャップがもっとあると確信しています。要件によっては、これに対するフォールバックを無効にしてもよいかもしれません。マルチカラムのグリッドレイアウトではなく、垂直に積み重ねたブロックレベルの要素です。フォトギャラリーのようにグリッド構造を絶対に必要とするような場合は適さないでしょう。その場合は、デフォルトとしてFlexboxから始めて、サポートされている場合のみGridの機能を適用するために@supportsを使用する方がうまくいくかもしれません。0;}}}フォールバックは通常@supportsブロックより前のコードで、Gridのコードはブロックの内側に記述します。@supportsブロックは詳細度を変更しないので、スタイルの上書きが確実に機能するようにコードの順番が大切です。注意点として、@supportsブロック内でdivのマージンをリセットする必要があります。これはちょっと面倒かもしれません。それらがお互いにどのように影響を与えるかを十分に認識している必要があります。スタイルを論理的に分離して記述できたらいいのにな、と思いませんか。CSS」にまとめています。*/}最初のブロックのnot演算子に注目してください。これは特定のスタイルを適用するためにGridをサポートしていないブラウザをチェックしています。この方法が悪い習慣であると考えられる理由は、@supports自体に対するブラウザのサポートを考慮しなければならないということです。これは非常に慎重を要します。論理的に分離された@supportsブロックでコードを書くことは非常に魅力的です。それは毎回ゼロから始まり、前の値を上書きしてそれらの論理的な考え方に対処する必要がないからです。さきほどと同じiOSの状況に戻りましょう。10.2にサポートされた時の間)。7と8のどちらでも機能しません。@supportsを使用する大きな理由は、コードのブロックが分離されている場合、見た目が簡単になり、実装が区別でき、機能のサポートに応じて異なる実装ができることです。相互に排他的なブロックを心配することなく使用できるようになるでしょう。どちらを取るかという話なら、、、@supportsのサポートブラウザ@supportsは時間が経つにつれて、より有用になる可能性があります。サポートする必要があるすべてのブラウザで@supportsがサポートされたら、今よりもっと積極的に使い始めることをお勧めします。8で動かなくなったiOSデバイスが問題です。それらをサポートする必要がなければ、@supportsを好きなように使用できます。皮肉なことに、@supportsの明確な活用事例は多くありません、しかし数は少ないですが、存在することは確かです。2019年2月6日@supportsが何の役にも立たない使い方@supportsを使用しない場合と全く同じなのに使用しているコードを私はたくさん見かけました。rotate(5deg);}}あるレベルでは、完全に論理的な意味があります。tranformがサポートされている場合は、スタイルを適用します。サポート以外のシナリオで何も変わらない場合は不要です。この場合、@supportsブロックがないとtranformは失敗する可能性があり、結果は同じです。このような例は他にもあります。2019年2月6日@supportsで遊ぶための拡張機能2つ紹介します。-GitHubどちらも、CSSで@supportsブロックを記述してから、その機能をサポートしているかどうかにかかわらず、ブラウザでコードのレンダリングを見ているかのようにオンとオフを切り替えることができます。Extensionで、FlexboxをフォールバックにしたGridの例です。操作が楽しいだけでなく、技術も非常に確かなものです。私がFlexboxを使って同じようにレイアウトをすることができれば、技術的な負荷を軽減することになるでしょう。queriesを表示し、オンとオフに切り替えるためのトグルを提供します。Vorhes氏のデモページを見てみましょう。ここでいくつかのチェックボックスとラジオボタンをスタイルしていますが、それらを@supportsブロックで内包しています。@supportsのチェックに合格しない限り、ブロック内にあるスタイルは適用されません。sticky;で使用するとあります。sticky;がサポートされていないブラウザのために失敗させることを除いて別の何かをする必要があります。contain;で使用するとあります。デモページもあり、イメージを並べ替えてコンテナを埋めます。このプロパティを使用すると、そのプロパティを使用して簡単かつ適切に実装できます。Filler氏はmix-blend-modeで使用するとあります。要素の不透明度を高めに設定し、mix-blend-modeがサポートされている場合は、要素を少し透けて見ることができます。Schennink氏のツイートでは、backdrop-filterで使用するとあります。サポートされている場合は、背景色の不透明度を調整する必要があることがよくあると、彼は言っています。}特定のベンダ接頭辞付きプロパティを使って、Edgeを検出するために使うことができます。Weinberg氏のツイートでは、クリッピングが利用できないときに要素のサイズやパディングを調整することで対応できるので、clip-pathで使用するとあります。Holzmann氏のツイートでは、env変数を使用してスマホにノッチがあるかチェックするとあります。Kvernmo氏のツイートでは、ドロップキャップの文字に必要なさまざまなプロパティのためにそれを使うとをあります。initial-letterがサポートされていない場合(またはまったく使用されていない場合)は適用したくない他のプロパティと組み合わせて使用​​します。Colley氏のツイートの例を紹介します。これは@supportsではなく、@mediaを使った場合ですが、考え方は同じです。下記のコードで、タッチデバイスでのスタックホバーを防ぐことができます。{}JavaScriptでの変形JavaScriptにはこのためのAPIがあります。false)}これを使用するには、パラメータでプロパティを渡し、別のパラメータで値を渡します。"grid");または、CSSの構文を反映した1つの文字列ですべてを指定します。flagで)が@supportでセレクタのチェックをサポートしています。{}終わりにわたし達は@supportsの活用事例を見ることが好きです。あなたが使用している例を共有してください。