LoginSignup
3

More than 3 years have passed since last update.

@supportsを使ってCSS display: grid; をサポートしているブラウザにGridレイアウト、そうでないブラウザにはFlexboxレイアウトを適用

Posted at

CSS display: grid; をサポートしているブラウザにはGridレイアウト、そうでないブラウザにはFlexboxレイアウトを適用させるCSSの書き方を紹介します。

display: grid; をサポートしている主要ブラウザ

https://caniuse.com/#feat=css-gridを参考にdisplay: grid; をサポートしている主要ブラウザをまとめてみました。

ブラウザ名 grid使えない最終Version grid使えるVersion
IE 11 (partial support) なし
Edge 15 (partial support) 16
Safari 10 10.1
iOS Safari 10.2 10.3
Android 4.4.4 5.0
Firefox 51 52
Chrome 56 57
Opera 43 44

IEとEdgeは-msprefixがついた独自プロパティで部分的に対応しています。
iOS Safariが案外新しめのバージョンまで使えないので注意です。

機能クエリ@supportsを使って実装

機能クエリ @supports を使いdisplay: grid;に対応しているブラウザとそれ以外に別のスタイルを出し分けます。

/*例*/
.box {
  display: flex;
  flex-wrap: wrap;
}
@supports (display: grid) {
  .box {
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: repeat(3, 1fr);
  }
}

簡単ですね!

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3