@supportsを使用したCSSでの機能検出
提供:Dev Guides
CSSの新しいルール@supportsを使用すると、訪問者のブラウザーで特定のCSS機能が使用可能かどうかを簡単に検出できます。 これにより、これらの機能をサポートされているブラウザでのみ使用したり、サポートされていないブラウザでのみ特定のルールを定義したり、他のブラウザでそれらを完全に無視したりできます。 @supports は、Modernizrのようなツールを置き換える純粋なCSSの方法です。 @supports を使用すると、機能のサポートと非サポートの両方をテストできます。
@supports (column-count: 3) { div { column-count: 3; } }
非サポート
機能がサポートされていない場合に特定のルールをテストして適用する方法は次のとおりです。
@supports not (display: flex) { .sidebar { float: left; } }
および/または演算子を使用して複数のCSS機能をチェーンします。
@supports (display: flex) or (display: -webkit-box) or (display: -webkit-flex) or (display: -ms-flexbox) { .menu { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } }
1つの大きな警告
現在、@supportsには1つの大きな注意点があります。@supports自体は普遍的にサポートされていません。 Internet Explorerではまったくサポートされておらず、バージョン11でもサポートされておらず、v9.2以降のSafariforiOSでのみサポートされています。 詳細については、 @supports CanIUseページを参照してください。
そのため、ほとんどのIEユーザーがEdgeに切り替えるまで、しばらくの間Modernizrを使い続ける方が現実的かもしれません。
@supports には、JSの機能を検出するために使用できる便利な JavaScriptAPIもあります。