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

CSS3のプロパティには接頭辞が必要な場合がある

CSS3を使えるようになってはいますが、これって実はまだ仕様策定の途中なんですよね。だから、CSS3で将来的に採用予定のプロパティは、各ブラウザ側で「本実装はまだだけど、とりあえず先行して使える状態にしてあるよ」といった対策がされてたりします。で、これらを私たちが使えるように、各ブラウザが独自の接頭辞を用意しています。

例えば、ボックスに影を付けるCSS3のプロパティ「box-shadow」。記述する場合は、

.shadow {
	box-shadow: 5px 5px 10px 5px;
}

となります。ただ、このプロパティがFirefoxで仮実装の段階であった場合は、Firefox用に用意されている接頭辞を付けてものを追記する必要があります。例えば以下のように。

.shadow {
	-moz-box-shadow: 5px 5px 10px 5px;
}

先頭に「-moz-」と付いた行が追記されましたよね。これは「Mozilla」の略で、Firefoxが用意しているベンダープレフィックスです。以下は主要なブラウザの接頭辞です。

  • -moz- (Mozilla Firefox)
  • -webkit- (Webkit系 Google Chrome、Safari)
  • -ms- (Microsoft社 Internet Exploler)
  • -o- (Opera)

上記を見ると察しがつくと思いますが、各ブラウザの接頭辞(ベンダープレフィックス)は、ブラウザのリリース元やレンダリングエンジン名を省略した形ですね。上記の主要ブラウザで、先行実装されている段階のプロパティを使う場合は、以下のように各ブラウザ用のベンダープレフィックスを一つ一つ記述してあげます。

.shadow {
	-moz-box-shadow: 5px 5px 10px 5px;
	-webkit-box-shadow: 5px 5px 10px 5px;
	-ms-box-shadow: 5px 5px 10px 5px;
	-o-box-shadow: 5px 5px 10px 5px;
}

ただし、ブラウザ側で本実装された場合はそのベンダープレフィックスは不要になります。もしかしたら、そのベンダープレフィックス自体が使えなくなるかもしれません。なので、

.shadow {
	-moz-box-shadow: 5px 5px 10px 5px;
	-webkit-box-shadow: 5px 5px 10px 5px;
	-ms-box-shadow: 5px 5px 10px 5px;
	-o-box-shadow: 5px 5px 10px 5px;
	box-shadow: 5px 5px 10px 5px;
}

のように、どのベンダープレフィックスが無効になってもいいように、通常の指定方法も記述してあげる必要があります。上記の場合は、通常の指定を最後に書いていますが、これはCSSが後に書かれた指定を優先するからです。将来的にベンダープレフィックスが将来的に機能しなくなるならいいんですが、予期せぬ解釈をされてしまうと大変です。

それらを念頭に、必要のないトラブルには遭わないように(各ブラウザも配慮はしているはずですが)、不要なベンダープレフィックスは書かないように注意しましょう。

各ブラウザのCSS3対応状況については、以下の2サイトがオススメです。

各ブラウザのCSS3対応状況を確認する際に便利なサイト

HTML5 & CSS3 Web Design

CSS3の主要プロパティが各ブラウザで対応しているかどうかが一覧でサクッと見られます。
HTML5   CSS3 Web Design

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

こちらもCSS3の対応状況が確認可能。上記サイトよりも多少多めにプロパティがフォローされてますね。
Can I use... Support tables for HTML5  CSS3  etc