ベンダープレフィックスとは
ブラウザごとに異なる表示
比較的古いバージョンのブラウザ環境では、CSS3が適用されません。
そこで、各ブラウザごとに用意されている「ベンダープレフィックス」をCSSに付加記述することで、補助的にCSS3の機能を実装させることができます。CSS3における、新しいプロパティを利用する場合、値の先頭に-moz-や-webkit-などのベンダープレフィックスを付ける必要があります。最新のプロパティを採用する際は、caniuse.comで、ブラウザの対応状況を確認しましょう。
ベンダープレフィックスとは
各ブラウザメーカーが独自に拡張した要素を記述するための特殊な接頭辞(prefix：プレフィックス)
CSSにおけるプロパティ名などの先頭に、メーカーやWebブラウザの種類を示す特殊な文字や記号の並びを付け足す。著名なWebブラウザのベンダープレフィックスとしては、Mozilla Firefoxの「-moz-」や、Google ChromeやApple SafariなどWebKit採用ブラウザの「-webkit-」、Microsoft Internet Explorerの「-ms-」、Operaの「-o-」などがあります。ブラウザごとのCSS3の対応状況やベンダープレフィックスの有無に関しては、Can I useというサイトで確認することができます。CSS3など、古いブラウザに対応出来ない場合を考慮し、先頭に-moz-や-webkit-などを付けて、補助を促します。
【サンプル】※border-radiusは、現在、最新のブラウザであれば、ベンダープレフィックスの必要はありません。
|
1 2 3 4 |
border-radius: 10px;//角丸にする -webkit-border-radius: 01px;//Google Chrome, Sfariに対応 -moz-border-radius: 10px;//Firefoxに対応 -ms-border-radius: 10px;// Internet Explorerに対応 |
| -webkit- | Chrome・Safari・Microsoft Edge | |
|---|---|---|
| -ms- | Internet Explorer | |
| -moz- | Firefox | |
| -o- | Opera |
