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

CSSのベンダープレフィックスは「-webkit-」「-moz-」などを手動で付与していくととても手間がかかります。Autoprefixerなど自動化のツールを使うと効率的です。

コンテンツ [表示]

  1. 1CSSのベンダープレフィックスとは?
  2. 1.1ベンダープレフィックスの一覧
  3. 1.2ベンダープレフィックスの使い方
  4. 2CSSのベンダープレフィックスを自動で追加したい
  5. 2.1ベンダープレフィックスを自動でつける方法
  6. 3Autoprefixer CSS
  7. 4まとめ

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プロパティの各ブラウザの対応状況は下記のリンク先で調べる事ができます。

Can I use... Support tables for HTML5, CSS3, etc

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

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

CSSのベンダープレフィックスを自動で追加したい

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

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

ベンダープレフィックスを自動でつける方法

Photo byBoskampi

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

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

Autoprefixer CSS

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

Autoprefixer CSS online
Autoprefixer online — add the desired vendor prefixes and remove unnecessary in your CSS

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

Autoprefixerに入力するCSSのスタイル

.scale {
  transform: scale(1.5, 1.5);
}
Autoprefixerに入力した結果
Autoprefixerに入力した結果はこの通りです。

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

Browserlist
またBrowserlistで対応させるブラウザの範囲の選択が可能です。書き方は少し癖がありますが、
・「last 2 version」: 最後の2バージョンのブラウザ
・「> 1%」: 1%以上のシェアがあるブラウザ
など指定が可能です。

まとめ

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

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

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

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

無料登録することで、すぐにプログラミング学習を始められます。ぜひカリキュラムをお試し下さい!

関連記事

【期間限定】全カリキュラム無料で提供中!

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

無料登録することで、すぐにプログラミング学習を始められます。ぜひお試し下さい!

目次