★CSSの基本
| ベンダープレフィックス
ブラウザーの対応状況（2026年6月現在）ベンダープレフィックスとは、CSS3導入の黎明期は各ブラウザーで設定されている「お試し版CSS機能）」がちがっっていたため、どのブラウザではどのように表示させるかを指定するためのものとして導入されました。 ブラウザがCSSの新機能を試験的に実装する際に、そのブラウザ固有の接頭辞（例：-webkit-、-moz-、-ms- など）をプロパティ名や値の前に付けて記述する仕組みです。主に古いブラウザや一部機能の互換性確保のために使われ、現在はAutoprefixerなどのツールで自動付与するのが一般的です。 ※これより下記の記述は2010年当時のCSS3黎明期のブラウザー対応についての記述です。
⬛︎ 先頭に付ける-moz-や-webkit-などCSS3で採用される予定の機能が各ブラウザで先行実装されていますが、それらの機能を動作させるには、 現状ではプロパティや値の先頭に-moz-や-webkit-などのベンダープレフィックスを付ける必要があります。
-moz-border-image: url("bg_dot.png") 15 round; // Firefox向け -webkit-border-image: url("bg_dot.png") 15 round; // Google Chrome、Safari向け ⬛︎ 拡張機能であることを明示するための識別子ベンダープレフィックス（接頭辞）とは、ブラウザベンダーが独自の拡張機能を実装したり、草案段階の仕様を先行実装する場合に、 それが拡張機能であることを明示するために付ける識別子のことです。
将来的に仕様が変更されるリスクに備えて、独自拡張や先行実装のプロパティ名や値の先頭に付けることが推奨されています。 ベンダープレフィックスでは、前後に「-」を付けたベンダー識別子（vendor identifier）でブラウザの種類を特定します。
主要ブラウザのベンダープレフィックス
-moz- …… Firefox -webkit- …… Google Chrome、Safari -o- …… Opera -ms- …… Internet Explorer ⬛︎ ベンダープレフィックス無しの指定も併記するCSS3が勧告されるまでには、まだ時間が掛かることが予想されますが、 今後審議を重ねる中で仕様変更・一部機能の廃止・新機能の追加が行われる可能性があります。 ベンダープレフィックスは草案段階の機能を実装する際に付けることが推奨されているので、 これらの機能を利用する際には当面ベンダープレフィックスを付ける必要があるでしょう。
ただし、ベンダープレフィックスは、 草案（Working Draft）が勧告候補（Candidate Recommendation）になったときには外すことが推奨されています。 すでにGoogle ChromeやFirefoxなどのブラウザでは、CSS3の機能の一部がベンダープレフィックス無しで動作するようになっています。 また、新しいブラウザではベンダープレフィックスが付いていると、逆に動作しなくなっている機能もあります。
ベンダープレフィックスを付けないと現状では動作しないプロパティや値を指定する際にも、 今後の仕様策定の進展やブラウザのバージョンアップに備えて、 ベンダープレフィックス無しの指定を併記しておくほうが良いでしょう。
border-image: url("bg_dot.png") 15 round; //ベンダープレフィックス無し（標準）も併記する -moz-border-image: url("bg_dot.png") 15 round; // Firefox向け -webkit-border-image: url("bg_dot.png") 15 round; // Google Chrome、Safari向け |
