@supportsを使用したCSSでの機能検出

投稿日: 2022-04-20 2022-04-20
タグ: css

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使用できますかページを参照してください。

そのため、ほとんどのIEユーザーがEdgeに切り替えるまで、しばらくの間Modernizrを使い続ける方が現実的かもしれません。

@supports には、JSの機能を検出するために使用できる便利な JavaScriptAPIもあります。

getdocs

13036