Ownedmedia ウェブ制作に役立つコンテンツを発信中!

CSS 2018.02.18

CSSのベンダープレフィックスを再確認してみる

Tags: ,,
最終更新日:Update

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

 

CSSのベンダープレフィックスを再確認してみる

 

Can I useはCSSやjavascript、各種APIなどのブラウザ対応状況が確認できるウェブサービスです。対応状況だけでなくバグの詳細にも記載があります。

 

今回は対象ブラウザに日本国内でシェア0.25%という条件で入れています。わかりやすいようにかなり厳密にしていますが、ほぼこれで全ての使用ブラウザはカバーできているのではないでしょうか。では以下にプロパティごとのベンダープレフィックスの要否をまとめています。

 

CSSのベンダープレフィックスを再確認してみる

 

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を整える(プレフィックス・文法チェック・自動整形)」で紹介しています。

 

コマンドであらかじめ設定した内容で必要なベンダープレフィックスが自動付与された状態でコンパイルされます。

 


 

いかがでしょうか、今回はかなり少ないシェアで見ていきましたが、主要ブラウザであれば現在のところはほとんど気にしなくてもいいのかも知れませんが、あくまで知識として知っておくことは大切ですね。

この記事を書いた人

オガワ シンヤ

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

  • Twitter

コメントフォーム

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。

内容に問題なければ、お名前・ハンドルネームとメールアドレスを入力いただき、下記の「コメントを送信」ボタンを押してください。

CAPTCHA


この記事もよく読まれています

Scroll to Top
ご質問・ご相談はありませんか ?