Autoprefixerでベンダープリフィックス自動付与する

ここまでで、PostCSSの仕組みとそのプラグインはどういうものなのか、そしてPostCSSのAPIを使ってASTを操作する方法と、プラグインの作り方を説明しました。

Webアプリを作る業務では、実際にASTを変換してCSSに独自の処理をおこなうのではなく、既存のプラグインを組み合わせることが多いです。今日から何日かは、PostCSSのプラグインとしてよく使われているものを紹介していきます。

Autoprefixer

PostCSSのプラグインとして最も有名なのが Autoprefixer でしょう。「PostCSSは知らなかったけど、Autoprefixerは使っている」という人も少なくないと思います。PostCSSも元々はAutoprefixerを作るために生まれました。

.example {
  display: flex;
  user-select: none;
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

例えば、上記のようなCSSを下記のように変換します。

.example {
  display: -ms-flexbox;
  display: flex;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  border-radius: 3px;
}

display プロパティの値としてIE用のベンダープリフィックスとして -ms-flexbox が追加されていることがわかります。他にも user-select プロパティには -webkit-, -moz-, -ms-プリフィックスが付与されています。また、入力となるCSSには -webkit-border-radius というプロパティが書かれていますが、最近のChromeやSafariでは border-radius プロパティにベンダープリフィックスは必要ないので、これは削除されています。

使い方

AutoprefixerはPostCSSのプラグインとして実行する他に、それ単体での実行も可能で、Rails上で実行するためのRailtieとしての実装、静的サイトジェネレーターのMiddlemanの拡張としての実装もあります。

• autoprefixer-rails
• middleman-autoprefixer

今回はPostCSSのプラグインとして、1日目で説明した postcss-cliで実行する方法 を説明します。

まずは、npmからautoprefixerをインストールします。

$ npm install -D autoprefixer

そして、.postcssrc.json を以下のように記述します。

{
  "use": [
    "autoprefixer"
  ],
  "input": "input.css",
  "output": "output.css"
}

オプションでサポートブラウザを指定する。

Autoprefixerはオプションで、ベンダープリフィックスを付与する対象となるブラウザのバージョンを指定することができます。

• last 2 versions: 全てのブラウザの最新2バージョン
• last 3 iOS versions: iOS Safariの最新3バージョン
• > 5% in US: USで 5% 以上のシェアがある全てのブラウザバージョン

上記のように、自然言語風の文字列でサポートブラウザを指定することができます。

postcss-cliでは、プラグイン名でプロパティを追加し、その下にそのプラグインのオプションを記述することができます。

{
  "use": [
    "autoprefixer"
  ],
  "input": "input.css",
  "output": "output.css",
  "autoprefixer": {
    "browsers": [
      "ie >= 11",
      "last 2 Edge versions",
      "last 2 Firefox versions",
      "last 2 Chrome versions",
      "last 2 Safari versions",
      "last 2 Opera versions",
      "last 2 iOS versions",
      "last 2 ChromeAndroid versions"
    ]
  }
}

---

今日はAutoprefixerの紹介と、使い方を説明しました。明日は少し掘り下げて、Autoprefixerの仕組みや実装について述べます。