ベンダープレフィックスというのは、各ブラウザがまだ正式に対応していないプロパティ、つまりデザインを反映させたいときにプロパティの値の前に付ける「接頭辞」のことです。プロパティに普通に値を指定するのと一緒にベンダープレフィックス付きの値も入れることで各ブラウザに対応させることができます。
ところで、ベンダープレフィックスはひとつではありません。説明すると長くなってしまうので省きますがブラウザによって異なります。下記の表をご覧ください。
| ベンダープレフィックス | ブラウザ |
|---|---|
| -ms- |
  |
| -moz- |
 |
| -webkit- |
   |
例えば、一昔前までは角丸を表現するborder-radiusはこんな感じで書いていました。
CSS
.example{
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
-ms-border-radius: 10px;
}
現在は、こんなにやらなくてもちゃんと反映してくれます。
さて、ブラウザとそれに対応したベンダープレフィックスが分かったところで、どうやってそれが必要かを判断したら良いのか疑問に思いませんか？それを確認するのがcaniuseというサイトです。
試しに、border-radiusのリアルタイムな対応状況をキャプチャしてみましょう。
※これは今現在のキャプチャです。
対応
一部対応
未対応
このようにそれぞれのブラウザの状況が一覧で簡単に分かるようになっています。「caniuse」の詳しい使い方については、下記の記事にも載っていますので、良かったら参考にしてください。
