普段Webサイトのコーディングを行う時にベンダープレフィックスは当たり前のように使っていると思いますが、きちんと理解して使えていますか？
また、基本的にベンダープレフィックスは自動で出力するのが制作の現場では当たり前となっています。ベンダープレフィックスの自動出力は比較的簡単に行えるので、初心者の方でも大丈夫！
今回は、ベンダープレフィックスに関する基本知識から、自動でベンダープレフィックスを付与する方法までご紹介したいと思います。
INDEX
ベンダープレフィックスとは
ベンダープレフィックスとは、簡単に言ってしまうとそれぞれのブラウザでCSSを正しく適用するための識別子です。
ブラウザによってベンダープレフィックスを付けておかないと適用されないCSSのプロパティがありますが、ベンダープレフィックスを付けることによって正しく表示させることができます。
ベンダープレフィックスの種類は大きく分けて下記の4種類です。
| Prefix | 対応ブラウザ |
|---|---|
| webkit | Chrome, Safari |
| moz | Firefox |
| ms | IE |
| o | Opera ※現在のOperaはwebkitなので-oは基本的に不要 |
webkit, moz, msは現在でもよく目にするベンダープレフィックスですが、oは現在は基本的に不要です。
ベンダープレフィックスはなぜ必要？
ベンダープレフィックスのそもそもの役割は、ブラウザでまだ正式にサポートされていないプロパティを適切に表示するためのものなので、ブラウザがアップデートされると不要になります。
しかし、ユーザーのPCやスマホにインストールされているブラウザが常に最新版へアップデートされているという訳ではないため、保険としてベンダープレフィックスを付けておくというのが慣習となっています。
特にやっかいなのがInternet Explorerで、2019年9月現在でもIE11が国内のブラウザのシェアで10％を超えているため、FlexboxやCSS Gridなどを使う時にmsのベンダープレフィックスを付けておかないと正しく表示されなくなる場合があります。
徐々にベンダープレフィックスが必要になるケースは減ってきていますが、それぞれのブラウザで正しく表示するためにはまだまだ欠かすことができません。
「コードが増えてめんどくさい」と思う方もいるかもしれませんが、ベンダープレフィックスは自動で付与することによって、手間をかけずに正しくベンダープレフィックスを付与することができます。
ベンダープレフィックスを手書きしている人はほとんどいないと思いますが、下記にご紹介する方法を使ってベンダープレフィックスを自動で付与するようにしましょう。
ベンダープレフィックスを自動で付与する方法
いちいちオプションがブラウザに対応しているのか調べて、ベンダープレフィックスを正しく記述していくのはかなり手間がかかり、効率的ではありません。
実際にWeb制作の現場ではどうしているかというと、自動でベンダープレフィックス付きのCSSが出力される環境を作り、そこで作業を行っています。
ベンダープレフィックスを自動で付与する方法は大きく分けて下記の2つの方法があります。
- テキストエディタの拡張機能を使う
- gulpを使う
どちらもそこまで時間をかけずに準備することができるので、簡単にご紹介します。
テキストエディタの拡張機能でベンダープレフィックスを付与する
Visual Studio Code（VS Code）や、Atom、Sublime Textを利用している場合はエディタの拡張機能を利用することで簡単に自動でベンダープレフィックスを付与することができるようになります。
VS Codeを利用している方は、「Autoprefixer」という拡張機能をインストールすれば、簡単にベンダープレフィックスを付与することができるようになります。
また、VS Codeの「Live Sass Compiler」を使えばscssをコンパイルする時に自動でベンダープレフィックス付きのCSSを出力してくれるので、scssでCSSを記述する場合はこちらがおすすめです。
gulpでベンダープレフィックスを付与する
gulpというのは、SassをCSSにコンパイルしたり、ベンダープレフィックスを付与したり、CSSを圧縮するという作業を自動で行ってくれるタスクランナーです。
導入に少し手間がかかりますが、一度設定してしまえばどのテキストエディタで編集しても必要な処理を自動で行ってくれるようになるので、使いこなせるようになると非常に強いです。
gulpの導入方法については、下記のページで詳しくまとめられています。
2019年ベンダープレフィックスを付けておいた方がいいプロパティ
2019年9月現在、ベンダープレフィックスを付けておいた方がいいプロパティをいくつかピックアップしました。
| liner-gradient | webkit |
|---|---|
| CSS Grid Layout | ms |
| transform | webkit |
| CSS Animation | webkit |
| radial-gradient | webkit |
ここで紹介しているのはあくまで一例です。そもそも1つずつベンダープレフィックスが必要なのか調べたり自分でベンダープレフィックスを記述するのは非常に効率が悪いので、やはりテキストエディタの拡張機能やgulpなどを使って自動でベンダープレフィックスを出力できる環境を作るのがおすすめです。
「Can I use」というサイトを見れば、プロパティごとにベンダープレフィックスが必要なのか不要なのか調べることができます。自分でベンダープレフィックスを確認したい場合はこちらを利用してみてください。
まとめ
書籍やWebサイト上のコードによっては、すでに不要なベンダープレフィックスも一緒に書かれたコードが掲載されている場合もあるので、それを鵜呑みにしてしまうと無駄なコードが増えてしまいます。
ベンダープレフィックスの基本知識と役割だけは理解しておいて、後はベンダープレフィックスを自動で出力できるような環境を作ることがおすすめです。
VS Codeは初心者の方でも簡単に機能を拡張したりカスタマイズすることができるので、まだ使ったことがない方はこの機会に導入してみてはいかがでしょうか。
