ベンダープレフィックスについて

Pさんが言っているのは上記の、同じプロパティなのに何か上についてるものが一緒についてくる謎のコードのことです。

ベンダープレフィックスとは

ベンダープレフィックスとは完璧には対応していないCSSプロパティを、各ブラウザに対応させるための記述です。

vendor（ベンダー…各ブラウザ）のためにつけるprefix（プレフィックス…頭につける接頭辞）だからベンダープレフィックス。

CSSには新しいプロパティや機能が追加されていきますが、各ブラウザが正式に対応するには時間がかかります。しかし新しい機能を早く使えるようにしたいので各ベンダー（各ブラウザ開発者）がその機能を使えるように独自の拡張機能を作って同じような機能を実行可能にする場合があります。その場合にその拡張機能を使えるように記述するのがベンダープレフィックスなのです。

主要なブラウザとベンダープレフィックス（対応表）

各ブラウザ	ベンダープレフィックス
Chrome Safari Opera	-webkit-
Firefox	-moz-
Internet Explorer Edge	-ms-

古いOperaのベンダープレフィックスは-o-ですが、新しいものでは-webkit-になっているようです。

ベンダープレフィックスをつけるプロパティ

では、一体どのプロパティがブラウザに対応しておらず、ベンダープレフィックスをつける必要があるのでしょうか？

それを探すにはCan I use…などのサイトで対応状況を確認する必要があります。

サイトへ行き、調べたいプロパティ名を入力すると、各ブラウザの対応状況を教えてくれます。

例えばtransitionプロパティを調べてみましたが、chromeの古いバージョンで、-webkit-　をつけるとサポートされるよ、という黄色い四角いマークが見えます。

ここを見ることで、どのブラウザのどのバージョンがベンダープレフィックスをつける必要があるのかがわかります。

ただ、この結果を見てもわかるとおり、こんな古いバージョンのブラウザを使っている人はかなり少ないだろうと思われることもあり、transitionにはベンダープレフィックスをつける必要はないと言う人もいますし、マークがあるからといって必ずつけなければならないわけではないです。

各ブラウザも正式にCSS3に対応してくると思われますし、プレフィックスをつけたままだとそのとき機能しなくなるので、プレフィックスをつけてないものも記述する必要があり、削除も適宜対応する必要があります。

簡単にベンダープレフィックスを付ける方法

どんなプロパティがベンダープレフィックスをつけなければいけないのか、探すのは面倒ですよね。

そんなときオンラインで簡単にベンダープレフィックスをつけてくれるサイトがありますので紹介します。

Autoprefixer CSS online　です。

書いたCSSをコピペするだけで、ベンダープレフィックスをつけたCSSを書いてくれるのでどのプロパティが対応していないか探す必要がありません。不安なときはこれを使うと良いと思います。