WEBサイト制作を学び始めた人は、「-ms」や「-webkit」などが先頭についたコードを見たことがあるのではないでしょうか？
「-ms」や「-webkit」はベンダープレフィックスと呼ばれる接頭辞です。
今回は、ベンダープレフィックスについてと種類について紹介していきます。
これから本格的にWEBサイト制作を学んでいきたい人は理解しておきましょう！
ベンダープレフィックスとは？
ベンダープレフィックスとは、どのブラウザでも正しくCSSを適応させるための識別子のことです。
ベンダープレフィックスには主に4種類あります。
|
接頭辞 |
対応ブラウザ |
|---|---|
| -ms | IE |
| -webkit | Chrome, Safari |
| -moz- | Firefox |
| o | Opera |
Operaに関しては正直あまり使われていないブラウザなので、意識しなくてもいいでしょう。
なぜベンダープレフィックスが必要なのか？
そもそもなぜベンダープレフィックスをつける必要があるのでしょうか？
理由はベンダープレフィックスをつけることで、ブラウザごとのCSSの表示を統一させるためです。
CSSは年々新しいプロパティが増えており、「Google Chromeだと効くけど、SafariだとCSSが効かないプロパティ」が存在します。
そんな時にベンダープレフィックスをCSSに指定することで、どのブラウザでもCSSが正しく適応されるのです！
ブラウザが発達してきてベンダープレフィックスが要らない場合もありますが、念のためにつけておくと良いでしょう。
自動でベンダープレフィックスをつける方法
自動でベンダープレフィックスをつける方法で一番簡単なのは、「テキストエディタの拡張機能」をつけることです。
例えば、一番使われているエディタであるVisual Studio Codeの拡張機能である「live sass compiler」を使ってコンパイルすることで、自動でCSSにベンダープレフィックスをつけてくれます。
僕はこの手法を使っているので、効率的にベンダープレフィックスを記述することができていますね。
まとめ
ベンダープレフィックスに関しては調べてみると面白い発見がたくさんあるので、是非興味ある方は調べてみてください。
CSSを理解していきたい人は是非おさえておきましょう。
