Autoprefixerが進化してCSS GridのIE 11対応がバリ楽になった（2017年〜2018年）

CSS Gridは便利なレイアウト手法ですが、IE 11にも対応する場合はベンダープレフィックスの付与や古い記法への対応が必要です。ベンダープレフィックスの付与や古い記法への対応を自動で行うのが[Autoprefixer](https://github.com/postcss/autoprefixer)なのですが、**2017年から2018年にかけてIE 11向けのGrid対応が大きく向上した**ことをご存知でしょうか？ 

最近のAutoprefixerを使えば、次のようなメリットがあります。

- IE 11向けに手動で書いていた`-ms-grid-column-span`、`-ms-grid-row-span`を手動で書かなくてよい
- IE 11で非対応の`grid-template-areas`、`grid-area`を変換可能
- `gap`（旧名`grid-gap`）をIE 11向けに書き出し可能
- `repeat()`をIE 11向けの旧仕様で出力可能

![image.png](https://qiita-image-store.s3.amazonaws.com/0/67884/76640837-8328-af31-52e0-58863a1b2690.png)

▲ AutoprefixerによるCSS GridのIE 11対応の一例


本エントリーで、それぞれ紹介します。

なお、CSS Gridについて不明であれば下記を参照ください。

- [Grid Layoutがやってきた！ Flexboxやfloatとの適切な使い分け方法 - CSS Nite](http://cssnite.jp/archives/post_2964.html)（スライド、動画あり）

# AutoprefixerでIE 11対応を行うには、`grid: true`を指定する
**AutoprefixerによるIE 11対応で重要なのは、Autoprefixerの引数に`grid: true`を渡すことです**。CSS Gridのモダンなコードが、IE 11に対応した記法で出力されます。

▼ webpackやCLIの場合

```js:postcss.config.js
module.exports = {
  plugins: [
    require('autoprefixer')({ grid: true })
  ],
};
```

▼ Gulpの場合

```js:gulpfile.js
gulp.task("default", () => {
  return gulp.src("src/style.css")
    .pipe(autoprefixer({ grid: true }))
    .pipe(gulp.dest("dist"));
});
```

なお、Autoprefixerについて不明であれば、次の記事を参照ください。それぞれWebpack、Gulpと連携する方法について解説しています。

- [CSSベンダープレフィックスを今この瞬間に辞める為のAutoprefixerの導入](https://qiita.com/tonkotsuboy_com/items/377913c51b1ac00deffe)

また、環境構築をせずにAutoprefixerを試すには、オンラインツールが便利です。

- [Autoprefixer CSS online](https://autoprefixer.github.io/)

では、この設定によるメリットを見てみましょう。

# `-ms-grid-column-span`、`-ms-grid-row-span`を手動で書かなくてよい

次のHTMLコードをCSS Gridでレイアウトすることを考えてみます。

```html:HTML
<div class="container">
  <header>header</header>
  <aside>aside</aside>
  <main>main</main>
  <footer>footer</footer>
</div>
```

IE 11を除くモダンブラウザであれば、`grid-column`で列の開始番号と終了番号を、`grid-row`で行の開始番号と終了番号をそれぞれ指定することで、Gridレイアウトにおける子要素の配置位置を決定します。

```css:モダンブラウザ用CSS
.container {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: 50px 1fr 50px;
}

aside {
  grid-column: 1 / 2;
  grid-row: 1 / 4;
}

header {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
}

/* 中略 */
```

IE 11では開始番号と終了番号に対応していないため、「列や行が何ライン分続くか？」の指定が可能な、`-ms-grid-column-span`、`-ms-grid-row-span`プロパティで設定します。**これらのプロパティが従来のAutoprefixerでは出力されず使えなかったので、手動でプロパティを記載する必要がありました**。

```css:旧対応コード
aside {
  grid-column: 1 / 2;
  -ms-grid-row-span: 3;  /* 以前はここを手動で追加していた */
  grid-row: 1 / 4;
}
```

**2017年12月にリリースされた[Autoprefixer 7.2](https://github.com/postcss/autoprefixer/releases/tag/7.2.0)、 2018年2月にリリースされた[gulp-autoprefixer v5.0](https://github.com/sindresorhus/gulp-autoprefixer/releases/tag/v5.0.0)では、`*-span`系のプロパティが自動で出力されるようになりました**。Autoprefixerの引数に`grid: true`を渡して「モダンブラウザ用CSS」のコードを変換すると、次のようにIE 11に対応したコードが出力されます。 `*-span`系のコードが出力されているのがわかります（`/* ☆☆☆ */`部分）。

```css:変換されたCSSコード
.container {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 200px 1fr;
  grid-template-columns: 200px 1fr;
  -ms-grid-rows: 50px 1fr 50px;
  grid-template-rows: 50px 1fr 50px;
}

aside {
  -ms-grid-column: 1;
  -ms-grid-column-span: 1; /* ☆☆☆ */
  grid-column: 1 / 2;
  -ms-grid-row: 1;
  -ms-grid-row-span: 3;  /* ☆☆☆ */
  grid-row: 1 / 4;
}

header {
  -ms-grid-column: 2;
  -ms-grid-column-span: 1;  /* ☆☆☆ */
  grid-column: 2 / 3;
  -ms-grid-row: 1;
  -ms-grid-row-span: 1;  /* ☆☆☆ */
  grid-row: 1 / 2;
}

/* 中略 */
```

これでIE 11でも目的のCSS Gridが実現できます。Codepenにデモをアップしました。


<p data-height="265" data-theme-id="0" data-slug-hash="NYxrZm" data-default-tab="css,result" data-user="tonkotsuboy" data-embed-version="2" data-pen-title="IE 11 Grid: grid-column, grid-row" class="codepen">See the Pen <a href="https://codepen.io/tonkotsuboy/pen/NYxrZm/">IE 11 Grid: grid-column, grid-row</a> by Takeshi Kano (<a href="https://codepen.io/tonkotsuboy">@tonkotsuboy</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

IE 11で確認すると、意図通りのレイアウトが実現できています。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/67884/596360bb-9cc7-3196-009e-b7fd5fac9706.png)

# `grid-areas`を自動で変換できる
親要素に`grid-template-areas`プロパティ、子要素に`grid-area`プロパティを用いると、エリア名を指定してグリッドの領域を設定できます。番号で子要素の位置を設定する場合、列や行が増減すると番号の書き換えが発生する場合がありますが、エリア名の場合は不要です。可読性も高く、変更に強いCSS Gridのコードが書けます。

```css:CSS
.container {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: 50px 1fr 50px;
  grid-template-areas:
      "aside header"
      "aside main"
      "aside footer";
}

header {
  grid-area: header;
}

aside {
  grid-area: aside;
}

main {
  grid-area: main;
}

footer {
  grid-area: footer;
}

```

エリア系プロパティは便利なのですが、残念ながらIE 11には対応していません。したがって、IE 11でのCSS Grid対応が必要な場合はエリア系プロパティを諦め、列・行番号指定を選択していた開発者も多いのではないでしょうか。

**エリア系プロパティも、Autoprefixerに`grid: true`を渡すことでIE 11向けの対応が行なえます**。`grid-template-areas`と`grid-area`の指定を元に、`grid-column`、`grid-row`による番号指定に変換されるのです。

```css:変換されたCSSコード

.container {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 200px 1fr;
  grid-template-columns: 200px 1fr;
  -ms-grid-rows: 50px 1fr 50px;
  grid-template-rows: 50px 1fr 50px;
  grid-template-areas: "aside header" "aside  main" "aside  footer";
}

aside {
  -ms-grid-row: 1;
  -ms-grid-row-span: 3;  /* ☆☆☆ */
  -ms-grid-column: 1;
  grid-area: aside;
}

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

/* 中略 */

```

注目すべきは、前述の`*-span`系プロパティの書き出しも行われていることです（`/* ☆☆☆ */`部分※）。Codepenにデモをアップしました。

※ この箇所以外書き出されていないのは、`*-span`プロパティの値が`1`で省略可能の為

<p data-height="265" data-theme-id="0" data-slug-hash="ZxQOjE" data-default-tab="css,result" data-user="tonkotsuboy" data-embed-version="2" data-pen-title="IE 11 Grid:  grid-area" class="codepen">See the Pen <a href="https://codepen.io/tonkotsuboy/pen/ZxQOjE/">IE 11 Grid:  grid-area</a> by Takeshi Kano (<a href="https://codepen.io/tonkotsuboy">@tonkotsuboy</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

IE 11で確認すると、目的のレイアウトが実現できています。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/67884/25701ebb-4178-76b5-5ecd-b6271f0a2837.png)

このように、**Autoprefixerを使えばIE 11を気にすることなくエリア系のプロパティが使えます**。

# `gap`（旧名`grid-gap`）プロパティのIE 11向け変換

2018年6月にリリースされたAutoprefixer 8.6より、IE 11向けの`gap`（旧名`grid-gap`）が変換できるようになりました。こちらの記事で詳しく解説しています。

- [CSS Gridのgap（grid-gap）が遂にIE 11でも再現できるように。Autoprefixerが待望のアップデート - Qiita](https://qiita.com/tonkotsuboy_com/items/10fc250ac579a32e9ee9)

# おまけ：`repeat()`を自動で変換できる

6つの同幅の列、4つの同じ高さの行など、セルを繰り返して定義したい場合は次のように`repeat()`を使うと便利です。

```css:CSS
.container {
  display: grid;
  /* 6列。100vw/6の幅を6回繰り返す */
  grid-template-columns: repeat(6, calc(100vw / 6));
  /* 4行。100pxの高さを4回繰り返す */
  grid-template-rows: repeat(4, 100px);
}
```

こちらも、AutoprefixerにてIE 11対応の書き出しが可能です。`(100px)[4]`のような記法はなかなか覚えづらいですが、Autoprefixerを使えばそもそも覚える必要もありません。

```css:変換されたCSSコード
.container {
  display: -ms-grid;
  display: grid;
  /* 6列。100vw/6の幅を6回繰り返す */
  -ms-grid-columns: (calc(100vw / 6))[6];
  grid-template-columns: repeat(6, calc(100vw / 6));
  /* 4行。100pxの高さを4回繰り返す */
  -ms-grid-rows: (100px)[4];
  grid-template-rows: repeat(4, 100px);
}

```


# AutoprefixerがあればGridのIE 11対応は楽に
`*-span`系のプロパティを手動で書く必要がなかったり、エリア系のプロパティを書く必要がないというのは、CSS GridのIE 11対応を行う上で便利です。まだIE 11対応が必要な案件も多いでしょうから、**Autoprefixerをセットで使ってできるだけコーディングの負担を減らしましょう**。