ベンダープレフィックス
ブラウザによる機能対応状況の違いを吸収する
CSS3は正式勧告前(2016年3月現在)の規格であり、それを見越してブラウザが独自に先行実装している。その際、仕様が未だ確定していないと見なされる機能についてはその機能のプロパティや値にブラウザ固有の実装である事を示す識別子が付けられている。それをベンダープレフィックスと呼ぶ。
あるブラウザが正式対応する前の機能を使う場合、そのブラウザにも対応させるためにはサイト開設者がプロパティや値の冒頭に当該ブラウザ用のプレフィックスを付ける必要がある。
当該機能に対してベンダーが正式対応を表明した時にはプレフィックスは外される。
ベンダープレフィックスの種類
| ブラウザの種類 | プレフィックス |
|---|---|
| Google Chrome, Safari(macOS,iOS) | -webkit- |
| Firefox | -moz- |
| Internet Explorer | -ms |
| Opera | -o |
書式
- プロパティ
-
- transform:rotate(45deg)
- -webkit-transform:rotate(45deg)
- 値
-
- display:flex
- display:-webkit-flex
実際の記述例
display:block; /* 未対応ブラウザ用 */
display:-webkit-flex; /* webkit系に個別対応させる */
/* display:-moz-flex; Firefoxが正式対応しているときにはコメントアウト */
display:-ms-flex; /* Internet Explorerに個別対応させる */
display:-o-flex; /* Operaに個別対応させる */
display:flex; /* 正式対応しているブラウザはこれを参照する */