Posted at

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

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

簡単ですね!