はじめに

CSS3のアニメーションなど新し目のものを使おうとするとベンダープレフィックス(-webkit-hogehoge)みたいなのをつけないといけない時があるよね？

ベンダープレフィックスをつけるとこんな感じで同じようなことを各ブラウザ向けに何度も書かなければならなくなってしまう。

  animation: spin 1s infinite linear;
  -webkit-animation: spin 1s infinite linear;

このベンダープレフィックスを意識していちいちこのプロジェクトで対応するブラウザにはこのCSSにはこのプレフィックスが必要なんて考えたりするのって生産性が悪いよね？

それにシンプルなコードにならない。

そこでベンダープレフィックスを自動でつけてくれるAutoprefixerなんだけど、基本的にGulpやWebpackなどフロントエンドのツールに組み込んで使うんだ。

そこで僕らのRailsでcssをminifyしてくれたりメッセージダイジェストをつけたりしてくれるSprocketsにAutoprefixerの機能をつけてくれたのがAutoprefixer Railsだ

検証環境

Rails: ver4.3.1
scssファイルをSprocketsでコンパイルしてcssへ変換

RailsにAutoprefixer Railsを組み込む方法

Gemfileに追記

Gemfileに下記を追記

gem 'autoprefixer-rails'

設定ファイルを追加

config/autoprefixer.yml

browsers:
  - "> 5%" #上位1%のブラウザを対象にする 
  - "last 2 versions" #下記以外は最新のメジャーブラウザ2バージョンのみサポート
  - "IE >= 11" # IEは11以上
  - "Android >= 4" # Androidは4系をサポート

上記の設定だと、上位5%以上のシェアのブラウザに対して、そのブラウザの過去2のバージョンをサポートするが、IEは11以上、Androidは4以上をサポートするということになる。
ここでIE >= 8と書くとIE8以上を対象にしてくれるというわけだ。(対象にしたくないけど)

パーセンテージ指定ところはどのブラウザ名なのか、各バージョンで見てるのか正直良くわからなかった
詳細は https://github.com/ai/browserslist を参考にしてもらいたい。

キャッシュの削除

キャッシュの削除が推奨されているので素直にクリアしといたほうが良さそう。
あまりトリッキーなことをしないでいるdevelopment環境のならたぶんやらなくても良さそう

bin/rake tmp:clear

コンパイル結果

assets:precompile したり、development環境で逐次コンパイルした結果以下のようになる。

コンパイル前のSCSS

.sample {
  animation: spin 1s infinite linear;

  @keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }
}

コンパイル後のCSS

-webkitのベンダープレフィックスがついているものが追加されているのがわかる

.sample {
  -webkit-animation: spin 1s infinite linear;
          animation: spin 1s infinite linear;
}
@-webkit-keyframes spin {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes spin {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

Autoprefixer RailsでCSSのベンダープレフィックスをsprocketsに任せよう