Corredor

ウェブ、プログラミングの勉強メモ。

IE11 で CSS Grid を使うのが大変だった

display: grid で実現できる CSS Grid。コレを IE11 で使うには、ベンダプレフィックスが必要だと分かった。

そうかと思い grid-template-columns-ms-grid-template-columns と書いてみるとコレが動かず、よくよく調べたら -ms-grid-columns と書かないといけないようだ。

コレはヤバそうな臭いを感じて調べてみると、やはり IE のベンダプレフィックスは色々と違いがあるようだった。

自分自身そこまで使いこなしているワケでも、多用しているワケでもないので被害は少なめだが、一番困ったのは grid-gap プロパティのベンダプレフィックスがないことだった。IE の場合は代わりに margin でなんとかしないといけなかった。

また、要素が自動的に折り返してくれることもなく、2行目以降に表示したい要素は -ms-grid-row を指定するしかない。

あまりにプロパティが違いすぎて、AutoPrefixer でも完全対応はできないようだ。自分で使う内容を確認しつつ、SASS ミックスインを作ったりして回避する他なさそうだ。

以下に、IE とその他のブラウザで同等の表示結果が得られるサンプルを作ってみた。

See the Pen CSS Grid Practice by Neos21 (@Neos21) on CodePen.

IE 向けの指定を通常のセレクタに書いておく。そのうえで、@supports 規則を使って display: grid が有効か確認し、対応しているブラウザ向けに改めてスタイルを定義し直すようにした。こうすると CSS Grid のサポート状況に合わせてルールをまとめられる。本当なら「フォールバック」は後に書きたいが、CSS の「後から書いたものがカスケード (上書き) される」特徴には逆らえないし、IE が @supports にも対応していないことから、仕方なくこう書くことに…。

なかなかしんどみが高かったので、IE を対象にする必要がある場合は、IE が死ぬまでは CSS Grid を多用するのは避けた方が良いかもしれない…。

Web担当者よ、古いIEを捨ててモダンブラウザに今すぐ対応せよ impress Digital Books

Web担当者よ、古いIEを捨ててモダンブラウザに今すぐ対応せよ impress Digital Books

  • 作者: 物江修,春日井良隆,小山健治,伊藤秀樹,Web担当者Forum編集部
  • 出版社/メーカー: インプレス
  • 発売日: 2016/01/12
  • メディア: Kindle版
  • この商品を含むブログを見る