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

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

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

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

• 参考 : CSS Grid Layoutをガッツリ使った所感 - Qiita
• 参考 : CSS GridをIE11、EDGEに対応させるために注意する点 東京新宿のホームページ制作会社イッティ
• 参考 : CSS Grid Layout はIE/Edgeで何とかなるのか？という声が多い件 - 40代からのフロントエンドエンジニアリング。
• 参考 : 初心者にも優しいIE対応したgridレイアウト | 株式会社 エヴォワークス -EVOWORX-
• 参考 : html - CSS Grid Layout not working in Edge and IE 11 even with -ms prefix - Stack Overflow

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

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

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

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

• デモ : Practice CSS Grid
• コード : frontend-sandboxes/index.html at master · Neos21/frontend-sandboxes

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

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