autoprefixerを使って快適にコーディングする

SASSを導入してからコーディングがかなり楽ちんになったのですが、CSSでベンダープレフィックスをつけるとき、「このプロパティってプレフィックスいるんだっけ？」「Safariでこれってまだ必要だっけ？」みたいな問題によく遭遇します。

-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;

いちいちCan I Useで対象ブラウザを確認するのも手間がかかるし、どうにかならんものかと悩んでいたら、知り合いのコーダーにautoprefixerを教えてもらいました。

autoprefixerってなに？

Can I Useの情報を元に、自動でベンダープレフィックスを付与してくれるツールです。 対象のブラウザの条件を細かく設定できたり、不要なベンダープレフィックスがあれば削除も行ってくれます。

さっそく入れてみる

Gemfileに追記してbundle installでおわり。

# Gemfile
gem "autoprefixer-rails"

適用するためにキャッシュをクリアします。

$ rake tmp:clear

これでもううまいことやってくれます。 例えば、

# これが
:fullscreen a
  display: flex

# こうなります
:-webkit-full-screen a {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex
}
:-moz-full-screen a {
    display: flex
}
:-ms-fullscreen a {
    display: -ms-flexbox;
    display: flex
}
:fullscreen a {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
}

便利すぎますね。。

ブラウザバージョンを指定する

browsersで対応ブラウザの条件を指定することもできます。

細かい書き方はai/browserslistを見てください。

# config/autoprefixer.yml
browsers:
    - "> 1%" # 使用率が1%以上
    - "last 2 versions" # 直近2つ前のバージョン
    - "IE >= 8" # IEは8以上

以上です。 これでコーディングが捗りますね〜＼(^o^)／

参考

• ai/autoprefixer-rails
• Autoprefixerによる、CSS3の管理｜Web Design KOJIKA17
• ai/browserslist
• Can I use... Support tables for HTML5, CSS3, etc