備忘録的プログラミングリファレンス

ベンダープレフィックス(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;
...
}

 ベンダープレフィックスが必要かは対応ブラウザを調べることでも知ることができます。
 ベンダープレフィックスを付けても機能しない場合があります。その場合は元々機能しないスタイルであるか、不完全である場合がありますので調査する必要があるでしょう。