CSSのプロパティにはブラウザごとに異なるベンダープレフィックス（接頭辞）を記述するものがあります。こうすることで異なるブラウザ間でも正しく表示できるようになります。今回はこのベンダープレフィックスについて再確認の意味も込めてまとめていきたいと思います。
現在はブラウザの進化でベンダープレフィックスを必要とするプロパティも少なくなってきましたが、逆にどれが必要かどうかがわかりにくくなってきていることもあり、2018年2月時点でのベンダープレフィックスの必要要否を改めて見ていきます。
ベンダープレフィックスの種類
そもそもなぜベンダープレフィックスが必要かというと、CSS3になり様々なプロパティの登場で各ブラウザが独自のアプローチで試験的に実装してきたという経緯があります。そのためブラウザ別にプロパティを区別するベンダープレフィックスをつけるようになりました。
ベンダープレフィックスは以下のものが存在しています。これらのベンダープレフィックスをCSSの各プロパティに付与します。
| -webkit- |
Google ChromeやSafari、Microsoft Edgeのブラウザ用ベンダープレフィックスです。 |
| -moz- |
Firefoxのブラウザ用ベンダープレフィックスです。 |
| -ms- |
Internet Explorerのブラウザ用ベンダープレフィックスです。 |
| -o- |
Operaのブラウザ用ベンダープレフィックスです。 |
.prefix-sample {
-webkit-animation: 3s linear 1s slidein;
-moz-animation: 3s linear 1s slidein;
-ms-animation: 3s linear 1s slidein;
-o-animation: 3s linear 1s slidein;
animation: 3s linear 1s slidein;
}
ではどのベンダープレフィックスをつければいいかという話になりますが、まずはどのブラウザまで対応させるか、と使用するプロパティによって異なってきます。後者は下記にまとめている通りとなりますが、重要なのは前者の方で対応させるブラウザによって必要なベンダープレフィックスが変わってきます。特にレガシーブラウザを切り捨てる場合は必要なベンダープレフィックスもそれだけ少なくなってきます。
プロパティ別のベンダープレフィックス要否状況
では現在の各ブラウザのバージョンで見てみたところのベンダープレフィックスの要否を整理していきたいと思います。詳しくはブラウザの対応状況を示してくれる有名サイト「Can I use」で確認することができますが、こちらではよく使うものをまとめています。
【Can I use】
https://caniuse.com/#home
Can I useはCSSやjavascript、各種APIなどのブラウザ対応状況が確認できるウェブサービスです。対応状況だけでなくバグの詳細にも記載があります。
今回は対象ブラウザに日本国内でシェア0.25%という条件で入れています。わかりやすいようにかなり厳密にしていますが、ほぼこれで全ての使用ブラウザはカバーできているのではないでしょうか。では以下にプロパティごとのベンダープレフィックスの要否をまとめています。
| opacity |
ベンダープレフィックスは不要 |
| background-size |
ベンダープレフィックスは不要 |
| box-sizing |
ベンダープレフィックスは不要 |
| box-shadow |
ベンダープレフィックスは不要 |
| text-shadow |
ベンダープレフィックスは不要 |
| border-radius |
ベンダープレフィックスは不要 |
| border-image |
「-webkit-」旧Androidブラウザ対応に必要 |
| rgba() |
ベンダープレフィックスは不要 |
| transition() |
ベンダープレフィックスは不要 |
| calc() |
ベンダープレフィックスは不要 |
| liner-gradient() |
「-webkit-」旧Androidブラウザ対応に必要 |
| radial-gradient() |
「-webkit-」旧Androidブラウザ対応に必要 |
| animation() |
「-webkit-」Androidブラウザ・旧iOS Safari対応に必要 |
| transform() |
「-ms-」IE9対応に必要
「-webkit-」Androidブラウザ・旧iOS Safari対応に必要 |
| filter |
「-webkit-」Androidブラウザ・旧iOS Safari対応に必要 |
| CSS Flexible Box Layout Module |
「-webkit-」Androidブラウザ・旧iOS Safari対応に必要 |
| CSS Grid Layout |
「-ms-」IE11・旧Edge対応に必要 |
今回はよく使うプロパティになりますが、これ以外についてはCan I useのサイトで確認できます。
Gulpでベンダープレフィックスを自動付与する
これらのベンダープレフィックスの要否をいちいち覚えておくのは非常に面倒ですので、Gulpなどのタスクランナーでベンダープレフィックスを自動的に付与する方法がオススメです。詳しくは過去記事
「gulpでCSSを整える（プレフィックス・文法チェック・自動整形）」で紹介しています。
コマンドであらかじめ設定した内容で必要なベンダープレフィックスが自動付与された状態でコンパイルされます。
いかがでしょうか、今回はかなり少ないシェアで見ていきましたが、主要ブラウザであれば現在のところはほとんど気にしなくてもいいのかも知れませんが、あくまで知識として知っておくことは大切ですね。
categories