0%

Programmingプログラミングナレッジ

Posted:2018.02.18

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

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

 

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

 


 

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

author
この記事を書いた人オガワ シンヤ
FacebookTwitter

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

制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら

デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。

ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。

コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。

こんな記事も読まれています

コメントもお気軽にどうぞ

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

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


ページトップへ
大阪市天王寺区のホームページ制作デザイン事務所(SOHO)DesignSupply.【デザインサプライ】