CSSの@supportsは機能クエリと呼ばれ、CSSの特定のプロパティやプロパティと値の組み合わせがブラウザにサポートされているかチェックするための機能です。言い換えると、条件分岐でスタイルを適用することができます。 そんな便利な@supportsの基礎知識と実践的な使い方、そして古い使い方や実は役に立っていない使い方などを紹介します。 How @supports Works 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに @supportsの古い活用事例 @supportsにnotがあるけれど、常に使用するべきという意味ではない @supportsのサポートブラウザ @supportsが何の役にも立たない使い方 @supportsで遊ぶための拡張機能 @supportsのより現実的な活用事例 @supportsのロ
![CSS @supportsの知っていると便利な使い方のまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/96d278bb15d09725633c0e7cf4c30a0eaeaaa9cb/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201901%2F2019022310.png)