Tweet

Pocket

CSS3において、W3Cではまだ草案の機能やプロパティを使用する際には、名前の前にブラウザ固有の接頭辞を付けることを推奨しています。これをベンダープレフィックスといいます。

ベンダープレフィックスには以下のものがあります。

IE → -ms-
FireFox → -moz-
Safari → -webkit-
Chrome → -webkit-
Opera → -o-

ベンダープレフィックスを付けるプロパティは、草案段階の仕様を先行実装しているものや、ブラウザベンダー独自の拡張機能を実装しているものです。

【使用例】

p {
　　border-radius:10px;
　　-moz-border-radius:10px;
　　-webkit-border-radius:10px;
　　}

「border-radius」というプロパティに対してベンダープレフィックスを付けて、FireFox（-moz-）、Safari、Chrome（-webkit-）それぞれに向けた記述を行っています。また、「border-radius」はOperaでは有効なのでOpera向けのベンダープレフィックス「-o-」は記述していません。

W3Cによると、ベンダープレフィックスは草案が勧告候補になった際には、外すことが推奨されています。border-radiusのように一部の機能がベンダープレフィックスなしで動作するように実装されているブラウザもあり、ブラウザをバージョンアップした際にベンダープレフィックスの付いたプロパティが動作しなくなることも考えられます。そのため上記の例のように、ベンダープレフィックスを付けていないプロパティも併記しておきましょう。