HTML5,CSS3,JavaScriptを使ってサイトを作っていて、ブラウザがどれぐらい対応しているのか調べる必要が出てきた。
HTML5 & CSS3 の対応表
IE9からは、CanvasやWebGL、CSS3のセレクタなど新機能にかなり対応している。
IE8は、かなり大変だなあ。いろいろ使えないんだな。border-radiusもないし。
IE8はどのぐらい使われてるのかな?
ということで、ブラウザのシェアを見てみよう。
現在のブラウザのシェアについて
Market share for mobile, browsers, operating systems and search engines | NetMarketShare
こちらのサイトでデスクトップでのブラウザシェア、モバイルでのブラウザシェア、各種バージョンでのシェアが分かる。
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の内容を変更することによって、バージョン別に適した措置をとることが出来る。