【CSS】@supportsについて

どうも、くまだです。

CSSの@supportsについてのあれこれ。

@supports とは

@supportsは、CSSのサポート状況に応じてスタイルを指定することができます。

@supportsは、指定したCSSプロパティについて、そのプロパティがブラウザが対応しているか対応していないかでよってスタイルを適用できます。

例えば以下のような記述になります。

/* ブラウザがgridに対応していない場合 */
.test {
  display: flex;
}


/* ブラウザがgridに対応済 */
@supports (display: grid) {
  .test {
    display: grid;
  }
}

例えば古いブラウザで上記のようにCSSのdisplay:grid;が非対応の場合であれば、flexの記述が代替でスタイル適用され、そうでないブラウザでgridが使えるのであれば@supportの中のスタイルが適用される、という感じです。

@supportsには、notやand、or演算子なども使用できます。

例えば@supports not(～～)で、対応していない場合のスタイルを適用できます。以下の例だとgridを対応していない場合はflexのスタイルが適用されます。

/* ブラウザがgridに対応済 */
.test {
  display: grid;
}


/* ブラウザがgridに対応していない場合 */
@supports (display: grid) {
  .test {
    display: flex;
  }
}

andやorの場合は以下のような意味になります。

ここまで読んでくださりありがとうございました。