CSSのベンダープレフィックスを自動で追加する方法を紹介！
CSSのベンダープレフィックスは「-webkit-」「-moz-」などを手動で付与していくととても手間がかかります。Autoprefixerなど自動化のツールを使うと効率的です。
CSSのベンダープレフィックスとは？
みなさんはCSSでスタイルを設定している時や、プロパティについて調べているときに「ベンダープレフィックス」という単語を見たことはないでしょうか？
CSSは年々新しいプロパティが増えており、一方でChromeやSafariなどブラウザ側での対応はまちまちです。ベンダープレフィックスはこの新しいCSSのプロパティに対して拡張機能を実装するのに利用する識別子です。
ベンダープレフィックスは具体的には-webkit- -moz- -o-」などの接頭辞（prefix）を使って書いていきます。
ベンダープレフィックスの一覧
ブラウザーごとにベンダープレフィックスは異なります。ここでは主要なブラウザとベンダープレフィックスを表で紹介します。
| prefix | ブラウザ |
|---|---|
| -webkit- | Chrome Safari Opera（新しい） |
| -moz- | Firefox |
| -o- | Opera（古い） |
| -ms- | Internet Explorer Edge |
ベンダープレフィックスの使い方
それではベンダープレフィックスを使って実際にCSSのスタイルを記述していきましょう。今回はtransformプロパティにベンダープレフィックスを付けてみます。
ちなみにtransformプロパティの各ブラウザの対応状況は下記のリンク先で調べる事ができます。
上記のサンプルでは.scaleで指定しているスタイルでベンダープレフィックスをつけてtransformプロパティを記述しています。
※ちなみに値scaleは要素の拡大・縮小が行えます
このようにベンダープレフィックスでは対応したいブラウザのベンダープレフィックスの数だけ行を追加して書いていきます。
CSSのベンダープレフィックスを自動で追加したい
さて、このベンダープレフィックスですがいちいち手動でつけていたら大変ですよね。
それぞれのプロパティの対応状況を調べ、対応OS・端末を決めてベンダープレフィックスを追加していくプロセスはかなり労力がかかります。Sassなどではmixinなど定義しておけばある程度効率的に書けますが、全自動というわけではありません。
ベンダープレフィックスを自動でつける方法
例えばwebpackやgulpではAutoprefixerという自動でベンダープレフィックスを付与するライブラリがあり、組み合わせることで上記のプロセスを開発者が意識せずに、自動でベンダープレフィックスを付与できる仕組みがあります。
また同様に、簡単に利用できるベンダープレフィックスを自動付与できるWEBのツールがありますので、この記事ではそのツールを紹介していきます。
Autoprefixer CSS
下記のサイトはCSSを入力すると、自動でベンダープレフィックスをつけてくれるサイトです。
例として以下のCSSのスタイルを入力してみます。
Autoprefixerに入力するCSSのスタイル
.scale {
transform: scale(1.5, 1.5);
}
-webkit- -ms-のベンダープレフィックスがついた結果が出力されます。
・「last 2 version」: 最後の2バージョンのブラウザ
・「> 1%」: 1%以上のシェアがあるブラウザ
など指定が可能です。
まとめ
いかがでしたでしょうか。ベンダープレフィックスについて自動化を含めて紹介してきました。
各ブラウザが対応しているプロパティは日々変化していて、それをウォッチしてベンダープレフィックスを手動で付与していくのは効率的ではありません。
ぜひ自動化できる環境を作った上で、CSSでデザインしていきましょう！
