【CSS】「@supports」とは？使い方について

@supportsとは？

CSSの「@supports」は、ブラウザが特定のCSSプロパティや機能をサポートしているかを判定するためのディレクティブです。

これを使用することで、CSSを使用する前に特定のプロパティや機能が使用可能かを確認することができます。使用方法は次のようになります。

@supports (プロパティ: 値) {
  /* プロパティをサポートする場合に適用されるスタイル */
}

「@supports」の記述の中には、CSSプロパティや機能を指定し、それらが使用可能であることを条件にして、条件に合った場合に適用されるスタイルを記述します。

@supportsの使用例

例えば、次のように記述することで、「display: grid」が使用可能である場合にのみ、「grid-template-columns」を使用するスタイルが適用されるようになります。

@supports (display: grid) {
  /* display: grid が使用可能な場合に適用されるスタイル */
  .container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
}

まとめ

詳細は、以下のリンクを参照してください。

• MDN: @supports