記述次第でAutoprefixerいらず？！CSS Grid LayoutのIE11対応方法と未サポートブラウザのフォールバック例

CSS Grid Layoutはグリッドレイアウトを実装するのに非常に便利なプロパティですが、案件で用いる際に頭を悩ませるのがブラウザのサポート状況ではないでしょうか。

2018年6月現在、世界的に見て84％のブラウザがCSS Grid Layoutをサポートしており、モダンブラウザと位置付けられているブラウザ（Edge、Chrome、Firefox、Opera、Safari、iOS Safariなど）ではすべて実装することができます。しかし、局所的な観点から見ると日本において依然シェアがあるIE11はIE10からの古い仕様でCSS Grid Layoutが実装されており、アフリカでシェア率が高いOpera miniや主に中国などで使われているQQブラウザ、Baiduなどは未サポートです。

特に日本ではIE11を開発対象から外しづらい傾向にあるため、CSS Grid Layoutの実務での導入はためらいがちですが、対応のポイントをしっかりとおさえておけば充分用いることができます。

IE11でのCSS Grid Layout対応方法

IE11で実装されているCSS Grid Layoutの仕様は、モダンブラウザで実装されている仕様と記述方法が異なり、かつ自由配置やショートハンドのプロパティがサポートされていません。

仕様のプロパティ	IE10+でのプロパティ
grid-template-colums	-ms-grid-colums
grid-template-rows	-ms-grid-rows
align-self	-ms-grid-column-align
justify-self	-ms-grid-row-align
grid-row-start	-ms-grid-row
grid-column-start	-ms-grid-column
-	-ms-grid-column-span
-	-ms-grid-row-span

特に労力がかかるのがIE11ではGirdアイテムの配置で、-ms-grid-columnと-ms-grid-column-spanを適宜追記しなくてはならない点でしょう。

.grid-item {
    /* IE10+での指定 */
    -ms-grid-column: 1;
    -ms-grid-column-span: 2;

    /* モダンブラウザでの指定 */
    grid-column: 1 / 3;
}

そこで登場するのがIE11でのCSS Grid Layoutサポートの強い味方、Autoprefixerです。

AutoprefixerでIE11のCSS Grid Layoutの対応が楽に

Autoprefixerの最新版（2018年6月現在ではv8.6.4）は、IE11用のCSS Grid Layoutプロパティの追記はもちろんのこと、grid-areaの自動変換やIE11では未サポートであるgrid-gapの再現を行ってくれます。

/* Autoprefixer適用前 */

.grid-container {
    display: grid;
    grid-template-areas: "header header" "nav main" "nav footer";
    grid-template-columns: 120px 1fr;
    grid-template-rows:  50px 1fr 50px;
    grid-gap: 20px;
}

header {
    grid-area: header;
}

nav {
    grid-area: nav;
}

main {
    grid-area: main;
}

footer {
    grid-area: footer;
}

/* Autoprefixer適用後 */

.grid-container {
    display: -ms-grid;
    display: grid;
    grid-template-areas: "header header" "nav main" "nav  footer";
    -ms-grid-columns: 120px 20px 1fr;
    grid-template-columns: 120px 1fr;
    -ms-grid-rows: 50px 20px 1fr 20px 50px;
    grid-template-rows: 50px 1fr 50px;
    grid-gap: 20px;
}

header {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 3;
    grid-area: header;
}

nav {
    -ms-grid-row: 3;
    -ms-grid-row-span: 3;
    -ms-grid-column: 1;
    grid-area: nav;
}

main {
    -ms-grid-row: 3;
    -ms-grid-column: 3;
    grid-area: main;
}

footer {
    -ms-grid-row: 5;
    -ms-grid-column: 3;
    grid-area: footer;
}

Autoprefixer変換後のソースコードを自分で記述しようと思うと大変ですね。

一点注意したいのが、例えばgrid-gapの変換においてgrid-template-areasを指定するかgrid-templateの記述を行わないとgrid-gapの記述を変換してくれないなど、Autoprefixerの仕様上ソースコードの変換が実装者の意図通りに動作するとは限らない場合があるため、コンパイルされたソースコードは必ず確認してみましょう。

CSS Grid Layout未サポートなブラウザへのフォールバック方法

CSS Grid Layoutが未サポートのブラウザでは、floatやdisplay: inline-block;、display: table;、display: flex;などで実装できるようなレイアウトであればCSS Grid Layoutを再現をすることが可能です。

floatと@supportでAutoprefixerいらず？

CSSの仕様書によると、display: grid;の子要素はブロック要素のような振る舞いをします。また、Webブラウザはサポートしていないプロパティを無視することから、CSS Grid Layout未対応ブラウザのためにfloatなどでレイアウトを行い、CSS Grid Layout対応ブラウザ用にdisplay: grid;で上書きしてしまえば同じようなレイアウトを再現することができます。

このような仕組みを利用したCSS Grid Layoutのフォールバックの手法には様々ありますが、ここでは以下のキャプチャのようなレイアウトをfloatとCSS Feature Queriesを用いて実装してみたいと思います。

<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">2</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
</div>

まず、.grid-containerと.grid-itemにそれぞれ、floatのレイアウトとCSS Grid Layoutの二種類を記述します。

/* レイアウト部分に関係する部分のみ抜粋 */

.grid-container {
    margin: 0 -1.16% 0 -1.17%;

    display: grid;
    grid-gap: 20px;
    grid-template-columns: repeat(3, 1fr);
}

.grid-item {
    width: 31%;
    float: left;
    margin: 0 1.16% 20px 1.17%;
}

現段階でブラウザでの表示を確認したキャプチャが以下です。

CSS Grid Layout未サポートのブラウザでは横並びのレイアウトが実現できていますが、.grid-itemに付与しているwidth: 31%;がGrid トラックの幅を基準にして反映されているため、CSS Grid Layoutサポートのブラウザでは表示崩れが発生している状態になっています。

そこでこの状態を回避するために、@supportsを用いてCSS Grid Layoutサポートブラウザのみwidthが初期化されるように記述します。

/* レイアウト部分に関係する部分のみ抜粋 */

.grid-container {
    margin: 0 -1.16% 0 -1.17%;

    display: grid;
    grid-gap: 20px;
    grid-template-columns: repeat(3, 1fr);
}

.grid-item {
    width: 31%;
    float: left;
    margin: 0 1.16% 20px 1.17%;
}

@supports (display: grid) {
    .grid-container {
        margin: 0;
    }

    .grid-item {
        width: auto;
        margin: 0;
    }
}

ちなみに@supportsはIE11に対応していないため、このような方法でAutoprefixerなしにIE11のCSS Grid Layout対応を行うことも可能です。Autoprefixerの制御コメントを利用して対応方法を使い分けてみてもよいかもしれません。

まとめ

IE11のCSS Grid Layout対応において、複雑なレイアウトの表現はAutoprefixerに頼った方が楽に再現ができますが、3カラムなどのシンプルなレイアウトの場合はAutoprefixerを用いなくても簡単に対応できます。

どの手法がよいかは要件や開発対象のブラウザを考慮した上での判断になりますが、適切に手法を選択し、実務においてCSS Grid Layoutを積極的に使っていきたいですね。