STAFF BLOG スタッフブログ

AutoprefixerでCSS GridのIE11対応を楽にする

ナウでヤングなCSS Gridを使ってみよう

グリッドレイアウトなサイトを作成する時に便利なCSS Grid
しかし最新の記述法だと、IE11に対応していません
IE11に対応させようとすると、ベンダープレフィックス祭りになったり古い記述法を駆使したりと大変
案件上中々切ることができないIE11、このために使うのをためらっていたのですが
ここ1年くらいのAutoprefixerのアップデートでIE11向けのCSS Grid対応が大きく向上したようです

さらに、最近のアップデートで、gapプロパティもIE11に対応しました
ようやくCSS Gridを使うにあたっての障害がほぼ無くなりました

そもそもAutoprefixerって?

Autoprefixerは、「Can I use」の情報を利用して、必要なベンダープレフィックスだけを付与してくれるツールです

  • IEは11以上でモダンブラウザは最新と1つ前から
  • シェアが5%以上のブラウザ
  • Android標準ブラウザは4以上

など、適用範囲を細かく指定できるのも大きな魅力

今まではCSS GridのIE11対応は正直よろしく無かったんですが、
先述のアップデートにより劇的に使いやすくなりました

Autoprefixerをインストール

AutoprefixerはwebpackやCLIなどでも使えるのですが、今回はGulpで使ってみます
(ただ単に自分がGulp使いなだけ)

AutoprefixerはPostCSSの一部なので、合わせてインストールしてください
自分は通常package.jsonを用意しておくので、そこに必要なものを記述します

※gulp-autoprefixerというプラグインもありますが、こちらはしばらくメンテナンスされていなくて、内部で使われいてるAutoprefixerは古いのでご注意ください

#package.json

{
  "name": "MyProject",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^8.6.0",
    "gulp": "^3.9.1",
    "gulp-postcss": "^7.0.1",
    "postcss-gap-properties": "^1.0.0"
  }
}

postcss-gap-propertiesも一緒にインストールしていますが、
gapプロパティを記述するだけでgrid-gapプロパティ(gapの古い記述法)も排出してくれるようにするものです
一緒にインストールしておくことをオススメします
(※Firefoxは現状grid-gapしか対応していません → Can I use

黒い画面から直接インストールしたい方は

npm init -y
npm i -D gulp gulp-postcss autoprefixer postcss-gap-properties

gulpfile.jsの設定

タスクにAutoprefixer(とgrid-gap対策用)を追加します

#gulpfile.js

var gulp = require("gulp");
var postcss = require("gulp-postcss");
var autoprefixer = require("autoprefixer");
var postcssGapProperties = require("postcss-gap-properties");

gulp.task("default", function () {
  return gulp.src("src/style.css")
    .pipe(postcss([
      postcssGapProperties(),
      autoprefixer({
        grid: true
      })
    ]))
    .pipe(gulp.dest("dist"));
});

ポイントは、13行目のautoprefixerの引数でgrid: trueを指定すること
これをしないとIE11対応してくれません

CSSを変換してみる

CSS Gridを使ったCSSコードがどのように変換されるか、実際に変換してみます
今回は以下のHTMLとCSSを準備しました

#HTML

<div class="container">
  <div class="header">header</div>
  <div class="main">main</div>
  <div class="aside">aside</div>
  <div class="footer">footer</div>
</div>
#CSS

.container {
  display: grid;
  height: 100vh;
  gap: 10px;
  grid-template:
    "header header" 100px
    "aside  main"   1fr
    "footer footer" 100px / 1fr 4fr;
}

.header {
  grid-area: header;
  background: #fdf;
}

.aside {
  grid-area: aside;
  background: #dff;
}

.main {
  grid-area: main;
  background: #ddd;
}

.footer {
  grid-area: footer;
  background: #ffd;
}

grid-templateで記述しないとIE11でgap対応が行われませんので注意してください
(grid-template-rowsプロパティ、grid-template-columnsプロパティだとダメ)

変換されたCSSを見てみると

.container {
  display: -ms-grid;
  display: grid;
  height: 100vh;
  grid-gap: 10px;
  gap: 10px;
  -ms-grid-rows: 100px 10px 1fr 10px 100px;
  -ms-grid-columns: 1fr 10px 4fr;
      grid-template: "header header" 100px "aside  main"   1fr "footer footer" 100px / 1fr 4fr;
}

.header {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  -ms-grid-column-span: 3;
  grid-area: header;
  background: #fdf;
}

.aside {
  -ms-grid-row: 3;
  -ms-grid-column: 1;
  grid-area: aside;
  background: #dff;
}

.main {
  -ms-grid-row: 3;
  -ms-grid-column: 3;
  grid-area: main;
  background: #ddd;
}

.footer {
  -ms-grid-row: 5;
  -ms-grid-column: 1;
  -ms-grid-column-span: 3;
  grid-area: footer;
  background: #ffd;
}

ちゃんと対応されていることがわかります

実際のブラウザで見てみると

どれも違和感ないですね(。・ω・ノノ゙パチパチ

これでCSS GridのIE11対応は大丈夫
どんどん使っていきましょう〜

INDEXブログ一覧へ
CONTACTお問い合わせはこちら