HTML5とCSS3の各ブラウザでの対応状況。ブラウザのシェアについて。

HTML5,CSS3,JavaScriptを使ってサイトを作っていて、ブラウザがどれぐらい対応しているのか調べる必要が出てきた。

HTML5 & CSS3 の対応表

HTML5 & CSS3 Support
ss20131119

IE9からは、CanvasやWebGL、CSS3のセレクタなど新機能にかなり対応している。
IE8は、かなり大変だなあ。いろいろ使えないんだな。border-radiusもないし。
IE8はどのぐらい使われてるのかな?
ということで、ブラウザのシェアを見てみよう。

現在のブラウザのシェアについて

Market share for mobile, browsers, operating systems and search engines | NetMarketShare
こちらのサイトでデスクトップでのブラウザシェア、モバイルでのブラウザシェア、各種バージョンでのシェアが分かる。
ss20131119_02

IE8はおよそ20パーセントある。

IEのバージョンによって分岐するには

IE8が20パーセントあるのなら、やはり対応したい。
バージョンによって、処理を変えるにはどんな方法があるのかしら。
こちらのサイトで、IEのバージョンによって適応するCSSを変える方法が紹介されている。
[CSS]IE6, IE7, IE8, IE9の各バージョンの分岐をvalidで処理する方法 | コリス

<!--[if lt IE 7 ]> <html class="ie6"> <![endif]-->
<!--[if IE 7 ]> <html class="ie7"> <![endif]-->
<!--[if IE 8 ]> <html class="ie8"> <![endif]-->
<!--[if IE 9 ]> <html class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html> <!--<![endif]-->

条件付きコメントを使って、ブラウザによって違うclassを付加するようにしている。これで、CSS側に対応するclassの内容を変更することによって、バージョン別に適した措置をとることが出来る。

コメントする

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください