備忘録的リファレンス

ベンダープレフィックス(vendor prefix)

 ベンダープレフィックスは、予定されているCSSの仕様を先行して各ベンダー(ブラウザの開発元)が実装していることをいいます。
 各ベンダーが「草案」の状態のプロパティーを実験的に実装していおり、そのプロパティを使うためにはベンダープレフィックスをプロパティに付加します。

 ベンダープレフィックスが必要な場合は、CSSのプロパティ名の前にベンダープレフィックス名を付けます。
 例えば、

-webkit-animation-name:

の-webkit-部分がベンダープレフィックスです。 CSSのプロパティー名はanimation-nameで、このように仕様にあるプロパティー名の前に各ベンダーごとのベンダープレフィックスが付いているのです。

 ベンダーごとのベンダープレフィックスは以下です。

ベンダープレフィックス名ベンダーとブラウザ
-ms-マイクロソフト Internet Explorer、edge
-webkit-Google Chrome、Safari
-moz-Firefox
-o-Opera

 ベンダープレフィックスを付けなくても動作するプロパティーもあります。逆にベンダープレフィックスが付いているものだけでは動作しない場合がありますので、両方ともに併記した方が無難です。

ベンダープリフィックスの併記
{
...
  -webkit-animation-name: fade;
  animation-name: fade;
...
}