CSSのベンダープレフィックスを自動で追加する方法を紹介！

みなさんはCSSでスタイルを設定している時や、プロパティについて調べているときに「ベンダープレフィックス」という単語を見たことはないでしょうか？

CSSは年々新しいプロパティが増えており、一方でChromeやSafariなどブラウザ側での対応はまちまちです。ベンダープレフィックスはこの新しいCSSのプロパティに対して拡張機能を実装するのに利用する識別子です。

ベンダープレフィックスは具体的には-webkit- -moz- -o-」などの接頭辞（prefix）を使って書いていきます。

ブラウザーごとにベンダープレフィックスは異なります。ここでは主要なブラウザとベンダープレフィックスを表で紹介します。
 

それではベンダープレフィックスを使って実際にCSSのスタイルを記述していきましょう。今回はtransformプロパティにベンダープレフィックスを付けてみます。

ちなみにtransformプロパティの各ブラウザの対応状況は下記のリンク先で調べる事ができます。

上記のサンプルでは.scaleで指定しているスタイルでベンダープレフィックスをつけてtransformプロパティを記述しています。
※ちなみに値scaleは要素の拡大・縮小が行えます

このようにベンダープレフィックスでは対応したいブラウザのベンダープレフィックスの数だけ行を追加して書いていきます。

さて、このベンダープレフィックスですがいちいち手動でつけていたら大変ですよね。

それぞれのプロパティの対応状況を調べ、対応OS・端末を決めてベンダープレフィックスを追加していくプロセスはかなり労力がかかります。Sassなどではmixinなど定義しておけばある程度効率的に書けますが、全自動というわけではありません。

例えばwebpackやgulpではAutoprefixerという自動でベンダープレフィックスを付与するライブラリがあり、組み合わせることで上記のプロセスを開発者が意識せずに、自動でベンダープレフィックスを付与できる仕組みがあります。

また同様に、簡単に利用できるベンダープレフィックスを自動付与できるWEBのツールがありますので、この記事ではそのツールを紹介していきます。

下記のサイトはCSSを入力すると、自動でベンダープレフィックスをつけてくれるサイトです。

例として以下のCSSのスタイルを入力してみます。

-webkit- -ms-のベンダープレフィックスがついた結果が出力されます。

いかがでしたでしょうか。ベンダープレフィックスについて自動化を含めて紹介してきました。

各ブラウザが対応しているプロパティは日々変化していて、それをウォッチしてベンダープレフィックスを手動で付与していくのは効率的ではありません。

ぜひ自動化できる環境を作った上で、CSSでデザインしていきましょう！

Qumeru[クメル]ではプログラミング学習が出来るカリキュラムを5月31日までの期間限定で無料で提供しています。