CSS3とベンダープレフィックス
◉ ベンダープレフィックス
"Google Chrome" や "Mozilla Firefox"、"Safari" といった様々なブラウザの
ベンダーがCSS3の拡張機能を実装するのに使用する識別子のこと。
プレフィックス(Prefix)とは「接頭辞」という意味。
CSS3のプロパティの接頭辞として「–webkit-」や「–moz-」を付けて「草案段階(WD:Working Draft)」のCSS3の仕様を先行して実装するときに利用する。
接頭辞 | 対応ブラウザー |
---|---|
-webkit- | Google Chrome、Safari |
-moz- | Mozilla Firefox |
-ms- | Microsoft Internet Explorer |
-o- | Opera |
◉ 書き方
【 CSS 】
section {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
}
ただし、CSS3の勧告候補になったら、
ブラウザ側のベンダーを外すことに推奨されているので、
サポート状況を確認して使用するようにする。
◉ サポート状況の確認
仮に、現在ベンダープレフィックスの記述が必要なプロパティであっても、
将来的に不要になるものも出てくる。
ベンダープレフィックスが必要かどうか、利用したいプロパティなどを
実装する時点で各ブラウザの対応状況を確認することが望ましい。
● Can I use... ( htttps://caniuse.com/)
「 Can I use... 」のトップページに表示されているテキストボックスに、
利用したいCSSのプロパティ名を入力すると、
ブラウザの対応状況や、
どのブラウザとバージョンでベンダープレフィックスが必要かが、
一目瞭然にわかるようになっている。