share facebook facebook twitter menu hatena pocket slack

2019.05.09 THU

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

工藤 響己

WRITTEN BY 工藤 響己

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

簡単ですね!

元記事はこちら

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

cloudpack

cloudpackは、Amazon EC2やAmazon S3をはじめとするAWSの各種プロダクトを利用する際の、導入・設計から運用保守を含んだフルマネージドのサービスを提供し、バックアップや24時間365日の監視/障害対応、技術的な問い合わせに対するサポートなどを行っております。
AWS上のインフラ構築およびAWSを活用したシステム開発など、案件のご相談はcloudpack.jpよりご連絡ください。