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^)/