自動でベンダプレフィックスを付けてくれるAutoprefixer

gulpには色々な便利なプラグインがあるのですが、学習コストが結構かかってしまうことから手が出せない人も多くいるかと思います。

そこで、今回はgulpのプラグインでも特に自分が便利だと思っているAutoprefixerに関して、gulpを使わずに使用する方法をご紹介したいと思います。

Autoprefixerとは？

対応したいブラウザを指定すれば、必要なベンダプレフィックスを自動で付けてくれる便利なツールのことです。

gruntやgulpで使われている事が多いのですが、それ以外にもエディタやWEBからも使用することが可能です。

今回は一番手軽に利用できるWEBからの方法をご紹介したいと思います。

こちらのサイトで実際に利用することが可能です。

Autoprefixer online – make your vendor prefixes is actual.

使い方

まず、対象のブラウザを指定します。

今回は例として、「Android 2.1」を対象としてベンダプレフィックを付けたいと思います。

下の画像の赤枠の部分に「Android 2.1」と入力してApplyボタンを押してください(Androidと2.1の間には半角スペースを入れてください)。

次に、実際のCSSを入力して行きます。

今回は例として、

.box {
  box-sizing: border-box;
}

を左の欄に入力してみて下さい。

すると、下の画像のように右欄にベンダプレフィックスが付いた状態で出力されたかと思います。

ブラウザの指定の仕方

「Android 2.1」と指定する以外にも、他に色々なブラウザの指定の仕方があります。

例えば、「Android2系、及びiOS7以上」に対応する必要がある場合は、「Android >= 2.0, Android < 3.0, iOS >= 7」と指定すればOKです

使用上の注意

Autoprefixerは「必要なベンダプレフィックスを自動で付ける」という動作と同時に、「不要なベンダプレフィックスを自動で削除する」という動作もしてしまうので注意をしましょう。

以上

gulpは確かに便利で強力ですが、gulpを使わなくても利用できる機能も多いので、gulp使ってみたいけど中々手が出せない方はWEBやエディタの拡張機能で同じようなプラグインが提供されていないか探すことをオススメします。

以上、たにっぱでした〜