【2022最新】CSSのベンダーフィックスとは？書き方や自動で付与する方法も解説！

ベンダープレフィックスとは？

ベンダープレフィックスとは、簡単に言えば「どのブラウザでもきちんとCSSが適用されるように、追加でCSSを指定する」ためのものです。

• ベンダー　　　 ： ブラウザの提供元
• プレフィックス ： 接頭辞

一昔前までは、flex-boxなどのCSSに対応していないブラウザがあり、ベンダープレフィックスを付与しないとうまく表示されないということがありました。

その問題を解決するために使用されていたのがベンダープレフィックスです。

現在では、各ブラウザでもCSSへの対応が進んでいるためベンダープレフィックスを付与する必要性は低くなっています。

ベンダープレフィックスの種類と書き方

ベンダープレフィックスの種類は３つ

ベンダープレフィックスには以下の3種類があります。

「-o-」というOpera用のベンダープレフィックスもありましたが、現在のOperaはBlink（WebKitから分岐したHTMLレンダリングエンジン）を使用している関係で「-webkit-」を使用することになっているため、「-o-」を使用することはなくなりました。

ベンダープレフィックスの書き方の例

ベンダーフィックスの書き方の例を「border-radius」を用いて確認してみましょう。

.sample {
  -weblit-border-radius: 10px;  /*　Google Chrome、Safari、Opera用　*/
  -moz-border-radius: 10px;  /* Firefox、Mozilla用 */
  -ms-border-radius: 10px;  /* IE用 */
  border-radius: 10px;  /* ベンダープレフィックスなし */
}

基本的なベンダープレフィックスの書き方は、通常のCSSの先頭に「-webkit」や「-ms-」などのベンダープレフィックスを付与するだけです。

ベンダープレフィックスが必要な理由

先に、各ブラウザでCSSへの対応が進んでいると述べました。

現在、ほとんどのブラウザで主要なCSSは対応しているため、ベンダープレフィックスを使用する必要性はほとんどありません。

では、ベンダープレフィックスの存在する意味はないかと言うと、答えは ”No” です。

現在でも、ベンダープレフィックスが必要になるケースはあります。

数は少ないがブラウザで未対応のCSSもある

もちろん、ベンダーフィックスが必要なCSSも数は少ないですがあります。

ブラウザで対応していないCSSを使用したい場合は、ベンダープレフィックスを付与する必要があります。

例えば、以下のようなCSSには現在（2022.02.15）ベンダープレフィックスの付与が必要です。

• justify-content （IE11）
• flex-wrap （IE11）
• align-items （IE11）

基本的にIE対応のためにベンダープレフィックスを必要とするケースが多く、IEのサポートとともに多くのベンダープレフィックスとお別れすることになるでしょう。

古いブラウザにも対応しなければいけない場合

全てのユーザーが最新バージョンのブラウザを使用しているわけではありません。

場合によっては、要件定義時に古いバージョンのブラウザに対応することも求められることもあるでしょう。

もし、古いバージョンのブラウザへの対応も考慮しなくてはいけないのであれば、その時にはベンダープレフィックスが必要になってくる場面もあります。

念のための保険として

コーディングする段階では、ベンダープレフィックスを使用する必要がなかったとしても、今後も必要ないとは限りません。

また、誰もが完璧にベンダープレフィックスについて理解しているわけではなく、把握しきれていない範囲でベンダープレフィックスが必要である場合もあるでしょう。

そのような場合を考慮して、念のためにベンダープレフィックスを付与しておく、ということもあるかと思います。

ベンダープレフィックスを自動で付与する方法

ベンダープレフィックスを付与するために、いちいちCSSの対応状況を調べて、必要に応じてベンダーフィックスを使用する、そんなことをしていたら物凄い手間と時間がかかってしまいます。

そんな面倒臭い作業を自動化できたら、圧倒的に作業効率が上がるとは思いませんか？

実は、ベンダープレフィックスを自動的に付与する方法があるんです！

ベンダープレフィックスを自動的に付与する方法には大きく以下の３つがあります。

• オンラインツールを利用する
• テキストエディタの拡張機能を利用する
• gulpなどのタスクランナーを利用する

このうち、３つ目の「gulpなどのタスクランナーを利用する」については、導入コストや手間が多くかかるため、詳しい説明を省きます。

オンラインツールを利用する

「Autoprefixer CSS online」というオンラインツールを利用することで、気軽にベンダープレフィックスを自動で付与することができます。

一旦書き上げたCSSコードをコピペするだけで、すぐにベンダープレフィックスを付与した形で出力してくれるため、とても便利です。

難しい設定や会員登録の必要が一切ないため、難しいことはしたくないという人におすすめです。

テキストエディタの拡張機能を利用する

Visual Studio Code（VS Code）や、Atomなどを使用している人であれば、テキストエディタの拡張機能を利用することで簡単に自動でベンダープレフィックスを付与することができるようになります。

もしVS Codeを利用しているのであれば、「Autoprefixer」という拡張機能をインストールすることで、簡単に自動でベンダープレフィックスを付与することができます。

また、VS Codeを利用していてscssでCSSを書いている人であれば、「Live Sass Compiler」でコンパイルする際に自動でベンダープレフィックスを付与してCSSを出力してくれるので、とても便利です。

ベンダープレフィックスの必要性の調べ方

使用するCSSにベンダープレフィックスが必要なのかを判断するには、そのCSSの各ブラウザでの対応状況を調べることが必要です。

Can I use

CSSの対応ブラウザを調べるには、「Can I use」というサイトが便利です。

入力欄に調べたいCSSを入力することで、各ブラウザごとの対応状況を色別でわかりやすく表示してくれます。

ベンダープレフィックスの注意点

必要のないベンダープレフィックスはできるだけ外す

必要ではなくなったベンダープレフィックスについては基本的に外すことが推奨されています。

もしベンダープレフィックスなしでも動作するようになったCSSについては、可能な限り記述していたベンダープレフィックスを削除し、ベンダープレフィックスなしのCSSのみを残すようにしましょう。

必要のないCSSの記述を削除することにより、WEBサイトのパフォーマンスの向上も多少ながら望めますし、コードが整理されて保守性も高まります。

ベンダープレフィックスなしのCSSの記述も忘れない

ベンダープレフィックスを使用する際は、ベンダープレフィックスなしの通常のCSSも必ず記述するように注意しましょう。

もし、ベンダープレフィックスなしのCSSを記述していなかった場合、対応状況が変化した時にブラウザによっては正常に表示されなくなる可能性があります。