HOME
本記事は執筆時点（2022年01月21日）の情報をベースにしております。掲載している情報が最新ではない可能性がありますので何卒ご容赦ください。
ベンダープレフィックスとは？
直訳すると「供給者の接頭語」
ベンダープレフィックスとは英語で「vender prefix」と表記し、「vender」（供給事業者）の「prefix」（接頭辞）という意味になります。
ベンダープレフィックスの役割
数多くあるCSSのプロパティの中には、ベンダー（ブラウザーの開発元）によって新しく開発されたプロパティと機能が存在します。
それらのプロパティは、試験的に先行導入されている段階のものもあり、他のブラウザでは機能しないので注意が必要です。
ベンダープレフィックスをプロパティの接頭辞として付与して記述することで、各ブラウザのベンダー（開発元）が開発した拡張機能のCSSを先行実装できるようになります。
ベンダープレフィックスの種類
ベンダープレフィックスにはブラウザごとの接頭辞が存在し、ハイフォンとともに記述します。
インターネットエクスプローラーの場合
インターネットエクスプローラーのベンダープレフィックスは「-ms-」です。
Google Chrome と Safariの場合
Google Chrome と Safariのベンダープレフィックスは「-webkit-」です。
Firefoxの場合
Firefoxのベンダープレフィックスは「-moz-」です。
記述の方法
前述の通り、該当するプロパティの先頭に記載します。
ベンダープレフィックスを記述する際は、「ベンダープレフィックスなしのもの」＋「ベンダープレフィックス付きのもの」の両方を記述します。
CSS
.sample{
writing-mode:vertical-rl;
-webkit-writing-mode:vertical-rl;
-ms-writing-mode:tb-rl;
}
なぜベンダープレフィックスを付けない状態のものも必要なのか？
ブラウザは定期的にバージョンアップを行うことで、随時ベンダープレフィックスなしでも対応できるようになっていきます。
そのため現時点ではベンダープレフィックスが必要でも、将来的には必要なくなるということがあります。
はじめに両方を記述しておき、ブラウザの対応が完了したら、ベンダープレフィックスは削除するようにしましょう。
まとめ
WEBサイトを制作する際は、訪問者がどのブラウザを使っていたとしても問題無く閲覧できるようにしなくてはなりません。便利なプロパティでもブラウザによっては使えないものもあります。中でもインターネットエクスプローラーは非対応のプロパティが多いため注意が必要です。