ベンダープレフィックスって面倒だよね！ということで省略ツールをご紹介。
ベンダープレフィックスとは
CSS3がまだ今ほど普及してない時代に、各ブラウザ（Chrome、Firefox、Safari、IE、Operaなど）がそれぞれに先行してCSS3を実装ていました。この際に、１つのCSSを実装するのに、各ブラウザに対して何行もプレフィックスを付けて書かなければいけない状況が発生しています。こんな感じ。
|
1 2 3 4 5 6 7 |
.easein{ -webkit-transition: 0.4s ease-in-out; -moz-transition: 0.4s ease-in-out; -ms-transition: 0.4s ease-in-out; -o-transition: 0.4s ease-in-out; transition: 0.4s ease-in-out; } |
ちなみにプレフィックスとは、「接頭辞」という意味です。この5行は、下記の表を見るとそれぞれの意味合いが分かります。
| プレフィックス | ブラウザ |
|---|---|
| -webkit | Chrome、Safari |
| -moz | Firefox |
| -ms | IE |
| -o | Opera |
| – | ※プレフィックスなしも記入する |
つまり、例えばtransitionというCSS3からのプロパティを設定するのに、各ブラウザに対応するために5行も書いています。手間は5倍、ミスタイプも増える可能性ありで、何とかならんのか・・・という感情が沸々と湧いてきます。
-prefix-freeの設定方法
そこで今回ご紹介するのが「-prefix-free」（https://leaverou.github.io/prefixfree/）
『CSSプレフィックス地獄から抜け出せ！』と書いてありますね^^
その触れ込みのとおり、このツールを使うと、各ベンダープレフィックスを省略することができます。
実装方法は簡単。
上記サイトから「prexfree.min.js」というファイルをダウンロードし、ライブラリ用のフォルダ（例：lib）に入れます。
そして、<head>～</head>内でスクリプトファイルとして読み込むだけです。
|
1 2 3 4 5 |
<head> ～ <script src="lib/prexfree.min.js"></script> ～ </head> |
これでOK。Prefix地獄から抜け出せます。
まとめ
ブラウザの方もCSS3への対応がかなり進んできており、普通にベンダープレフィックスなしでいけるプロパティも出てきました。（例えば角丸のborder-radiusなど）
（対応状況を調べるにはこちら http://caniuse.com/）
しかし、まだ対応していないプロパティも多いため、今回ご紹介したツールを付けておくのが無難と言えるでしょう。
公開日：2016年11月24日
最終更新日：2016年11月24日
