自動でcssのベンダープレフィックス対応をしてくれる「autoprefixer」を使ってみる

cssを使っていると、ブラウザごとに新しい技術への対応ができていたりいなかったりすることがあるみたいです。そういう場合は「ベンダープレフィックス」というブラウザごとの記述をすると良いみたいです。

ただいちいちそれをつけるのは面倒。それを自動でやってくれるのが「autoprefixer」ということらしいのでインストールしてみます。

その前に、これを使うには「postcss」というツールが必要らしいです。
これは吐き出したcssに対してなにかしらの後処理をするものらしく、そのときにプレフィックスをつけるという流れのようですね。

ということで「postcss」をインストール。

npm install postcss --save-dev

次に「autoprefixser」をインストール

npm install autoprefixer --save-dev

「.browserslistrc」を作成して以下を追加します。

last 5 versions
> 1% in JP

「last 5 versions」は、「各ブラウザの最新の5バージョンまで」「1% in JP」は「日本で1%以上のシェアが対象」ということらしいです。

ちなみにこれは「package.json」でも記述できるようなのですが、分かりにくくなるので「.browserslistrc」のほうがいいみたいですね。

次にpostcss用の設定ファイル「postcss.config.js」を作って、以下を書き込みます。
「autoprefixer」をプラグインに使うという宣言をする設定らしいです。

module.exports = {
  plugins: [
    require('autoprefixer')()
  ]
}

これで設定が完了したので、実行してみましょう。
まずは元ファイル「src.css」を用意します。

.test {
  transition: 1.2;
}

次に実行します。

-c で設定ファイルを読み込み、元ファイルを指定、 -oで出力ファイルを指定って感じみたいですね。

node_modules/.bin/postcss -c postcss.config.js src.css -o dist.css

「dist.css」が生成されました。中身はこんな感じでした。

.test {
  -webkit-transition: 1.2;
  transition: 1.2;
}

webkitのプレフィックスがついていますね。無事成功です！

今回は以上です！