CSS

The CSS vendor prefix is a browser-specific prefix that allows new CSS features to be applied experimentally before they are officially supported by each browser.

Vendor prefix

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

　CSSのベンダープレフィックスは、異なるブラウザが正式にサポートしていない新しいCSS機能を使用する際に利用される接頭辞です。この接頭辞を使用することで、各ブラウザが独自に実装した拡張機能や、まだ標準化されていない機能を適用できます。例えば、特定のCSSプロパティや値の前にブラウザ固有のプレフィックスを付けることで、その機能がブラウザ固有であることが明示され、機能を動作させることが可能です。

　ベンダープレフィックスは、将来的に仕様が変更されるリスクに備えるためにも使用されます。これにより、ブラウザ固有の機能が他のブラウザと互換性を保ちながら利用され、仕様が正式に採用されるまでの間、安全に使用することができます。プレフィックスには「-webkit-」や「-moz-」などの識別子が使用され、ブラウザの種類が特定されます。

　各ブラウザには固有のベンダープレフィックスがあり、以下が一般的なものです。

-webkit-: // Google Chrome、Safari、iOS向けの WebKitエンジン用
-moz-: // Mozilla Firefox向け
-o-: // Opera 向け
-ms-: // Internet Explorerおよび Microsoft Edge向け

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

CSS

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;

　現在では、ほとんどの主要なブラウザが多くの CSS機能を標準でサポートしているため、ベンダープレフィックスの必要性は減少していますが、新しい機能や実験的な機能を使用する際にまだ有用です。

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

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

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