スキルアップを始める

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

CSS(シー・エス・エス)
メルマガ購読できます

簡単1ステップ!届いたメールの「フォローを確認」クリックでメルマガ登録!一緒にスキルアップを目指しましょう!

@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);
  }
}

まとめ

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

Kindle Unlimited 会員は無料で購読できます
購読はこちら
Kindle Unlimited 会員は無料で購読できます
購読はこちら