• Facebook
  • Twitter
  • RSS
月別
コツコツあつめるWeb作りのためのたね たねっぱ!Web系情報ブログ Webのお役立ちネタ配信中!

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

投稿者アイコン
2015/07/13
書いた人:
tanippa!
カテゴリ:
CSS
タグ
23,908 views

gulpにある便利なプラグインの中から、自動でベンダプレフィックスを付けてくれるAutoprefixerという機能をgulpを使わずに使用する方法をご紹介したいと思います。

自動でベンダプレフィックスを付けてくれる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の間には半角スペースを入れてください)。

スクリーンショット 2015-07-10 17.35.51

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

今回は例として、

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

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

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

スクリーンショット 2015-07-10 17.34.31

ブラウザの指定の仕方

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

ブラウザ指定 詳細
iOS >= 7 iOS Safariの7以上
Android < 3.0 Android 3未満
last 2 versions 主要ブラウザの直近2バージョン
last 2 Chrome versions GoogleChromeの直近2バージョン

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

使用上の注意

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

以上

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

以上、たにっぱでした〜


この記事を読んだ人はこんな記事も読んでいます