【Rails】CSSのベンダープレフィックスをいい感じに自動で付けてくれる gem 'autoprefixer-rails'

最近CSSでできることの幅が増えてきた。また、flexbox などのCSSレイアウトも使う機会が増えてきていると思います。

使うときに毎回ベンタープレフィックスを気にしていられないし、だからといって付け忘れるとレイアウトが崩れる...

そんな悩みはRailsのgem 'autoprefixer-rails'で一発解消！

autoprefixer-rails の使い方

Gemfileに以下を記載して、 bundle install これだけ！

gem 'autoprefixer-rails'

 あとはCSSにベンダープレフィックスを除いたものを一つだけ書けがいい感じで補完してくれます。

例えば...グラデーションは以下の様な感じで細々書いていたと思います。

.gradient {
  background: -webkit-linear-gradient(top, #999, #067);
  background: linear-gradient(top, #999, #067);
}

でも、autoprefixer-rails を入れているので以下の様な感じで1つだけでOK！

.gradient {
  background: linear-gradient(top, #999, #067);
}

 表示されるCSSを見てみるといい感じで補完してくれてます！

Rails を使っているとこういう細かいところへの配慮をいい感じで処理してくれるのはとても助かります！

flexbox もいけるっぽい

flexbox も使ってみんですが、これもいい感じで補完してくれます。

CSSには以下を記載しただけです。

  .flexbox {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
  }

 するとどうでしょう（笑）こんな感じになってます。

.flexbox {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
}

CSSだけかな？って思ってたんですが、flexboxのようなCSSレイアウトにも対応してくれるのはとても嬉しいですね！

ぜひ、使ってみてください！