【CSS】Grid Layout を使いこなす – その5 IE 対応

「Grid Layout を使いこなす」全6回です。

⇒ その1 基本
⇒ その2 トラック、領域の値
⇒ その3 基本以外のプロパティ
⇒ その4 ショートハンド
⇒ その5 IE 対応(今回)
⇒ その6 まとめ

とても便利な Grid Layout ですが、IE10-11 、Edge 10-15 では、古い仕様(W3C Working Draft 7 April 2011)が実装されていて、そのままではレイアウトが反映されません。古いブラウザといっても、わずかながらシェアがあり、マイクロソフトのサポートも続いているわけで、無視できませんよね。

ベンダープレフィックスの記述が必要となりますが、利用できるプロパティに制限があり、どちらかにしかないプロパティもあります。そういった点を踏まえて記述する必要があります。

Grid Layout IE ベンダープレフィックス対応表

CSS Grid Layout (level 1) IE ベンダープレフィックス 対応メモ
display: grid diplay: -ms-grid
grid-template-rows -ms-grid-rows
grid-template-columns -ms-grid-columns
grid-template-areas
grid-template -ms-grid-rows, -ms-grid-columns で対応
grid-auto-rows
grid-auto-columns
grid-auto-flow
grid -ms-grid-rows, -ms-grid-columns で対応
grid-row-start -ms-grid-row
grid-column-start -ms-grid-column
grid-row-end -ms-grid-row-span で対応
grid-column-end -ms-grid-column-span で対応
grid-row -ms-grid-row, -ms-grid-row-span で対応
grid-column -ms-grid-column, -ms-grid-column-span で対応
grid-area
grid-row-gap 空のトラックを挟むことで対応
grid-column-gap
grid-gap
-ms-grid-row-span grid-row-end の代わり
-ms-grid-column-span grid-column-end の代わり

grid-template-areas に対応するベンダープレフィックスはありませんので、
コンテナ:-ms-grid-rows, -ms-grid-columns,
アイテム:-ms-grid-row, -ms-grid-row-span, -ms-grid-column, -ms-grid-column-span
で記述する方法となります。

また、grid-auto-flow で並ぶ方向を指定するというのにも対応するものがないので、値に column または dense を指定している場合は、アイテムごとに領域を指定しなくてはいけないようです。

Autoprefixer

上の対応表を見ながら、一つずつベンダープレフィックスを書き込んでいく・・・というと、地獄のような作業ですが、Autoprefixer というツールを利用するとこれを自動的に行ってくれます!
Gulp のプラグインなどで使うのが普通のようですが、Gulp のダウンロードも含めて、それは別の機会にまとめます。
Autoprefixer は、手軽に Web でも利用できます。今回はこちらを利用します。

Autoprefixer CSS online

左の欄に CSS を書き込み、下の枠に対象となるブラウザを指定し、「Apply」をクリックします。
そうすると、右の欄に、ベンダープレフィックスの含まれた CSS が表示されます。
便利ですねー!

ですが、grid-template-areas や、grid-gap など、ベンダープレフィックスに対応するプロパティがないものは、web の Autoprefixer では、自動的にそれに合うように変更されません。そのようなものを使わないか、手書きで調整することになります。

Gulp などで実装する場合は、grid-template-areas など対応する互換性のあるコードに変換してくれる機能もあります。

<ブラウザの指定方法例>

ブラウザ指定 詳細
IE 11 IE 11 のみ
Edge >= 10 Edge 10 以上
iOS < 10 iOS 10 未満
last 4 versions 主要ブラウザの直近4バージョンのブラウザ
last 2 Firefox versions Firefox 直近2バージョン
> 1% シェア率1%以上のブラウザ
> 1%, last 2 versions シェア率1%以上で、直近2バージョンのブラウザ
カテゴリーCSS

3 Replies to “【CSS】Grid Layout を使いこなす – その5 IE 対応”

コメントは受け付けていません。