CSS

Cascading Style Sheets vendor prefix.

Vendor prefix

先頭に付ける -moz- や -webkit- など

 ベンダープレフィックス(接頭辞)とは、ブラウザベンダーが独自の拡張機能を実装したり、草案段階の仕様で今後採用される予定の機能が各ブラウザで先行実装されていますが、それらの機能を動作させるために、そのプロパティや値の前にブラウザ固有のプレフィックス(接頭辞)を付け、それが拡張機能であることを明示することで動作させることが可能となります。

 将来的に仕様が変更されるリスクに備えて、独自拡張や先行実装のプロパティ名や値の先頭に付けることが推奨されています。ベンダープレフィックスでは、前後に「 - 」を付けたベンダー識別子(vendor identifier)でブラウザの種類を特定します。

-webkit-
//Safari, Google Chrome 向け
-moz-
//Firefox 向け
-o-
//Opera 向け
-ms-
//Internet Explorer 向け

 例えば、border-radius というプロパティであれば、各ブラウザのベンダープレフィックスを付けた指定とあわせて以下のように指定します。

.sample {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}

 この場合、-webkit-border-radius は、Google Chrome と Safari で有効になり、-moz-border-radius は Firefox で有効になります。本来のプロパティである border-radius は、Google Chrome と Opera で有効です。

ベンダープレフィックス無しの指定も併記する

 このベンダープレフィックスは、草案(Working Draft)段階の仕様が勧告候補(Candidate Recommendation)の状態になった時には、ベンダープレフィックスを付けずに実装することが推奨されています。しかし、実際には勧告候補となっている機能についても、ベンダープレフィックスを付けて指定する必要のあるもの、付けないで指定する必要のあるものなどが混在している場合があるようなので注意が必要のようです。また、新しいブラウザではベンダープレフィックスが付いていると、逆に動作しなくなっている機能もあるようです。

 ベンダープレフィックスを付けないと現状では動作しないプロパティや値を指定する際にも、今後の仕様策定の進展やブラウザのバージョンアップに備えて、ベンダープレフィックス無しの指定を併記しておくほうが良さそうです。