HTML5、CSS3 の古いブラウザへの対応について
カテゴリー: HTML/CSS/JS
この記事は2015年5月26日に書かれたものです。情報が古い可能性がありますのでご注意ください。
2014年10月28日に HTML5 が正式に勧告となりましたが、それ以前より多くのWebサイトが HTML5 や CSS3 を採用しています。弊社でも2012年辺りから HTML5 を採用し、丸角やシャドウ、グラデーションなどの CSS3 の一部のプロパティやセレクタを取り入れてきました。
特に、近年はレズポンシブWebデザインによるスマートフォンやタブレット対応も施していますので、CSS3 を使うことによって画像を少なくできることは、マークアップ作業やメンテナンスを楽にするだけでなく、通信速度やデータ量の面でも有効です。
ただ、そこで問題となるのが主に Internet Explorer 9 以前の古いブラウザへの対応です。HTML5 については IE8 以前が対応していませんし、CSS3 については IE8 以前のみならず、IE9 でも背景のグラデーションなどに対応していなかったり、IE10 でも対応していないプロパティがあります。
そのような古いブラウザ(というか、IE )に対して、HTML5 と CSS3 を適用させる方法として、以下の JavaScript ライブラリが有名です。
- html5shiv
- HTML5 を IE6 から IE8 に対応させる。
- Selectivizr
- CSS3 の属性セレクタや擬似クラスを IE6 から IE8 に対応させる。
- CSS3 Pie
- CSS3 の border-radius、box-shadow、linear-gradient、multiple background を IE6 から IE9 に対応させる。
これらの JavaScript ライブラリですが、HTML5 を採用していて IE7 や IE8 に対応させるなら、とりあえず html5shiv は必要になると思います。
Selectivizr はスクリプトを読み込むだけで、E[attr^=value]
、E[attr$=value]
などの属性セレクタや、:nth-child(n)
、:first-of-type
、:not(s)
などの擬似クラスが IE8 以下でも使えることから、HTML に class の値を付けなくても要素を区別することができますので、コードがシンプルになり、マークアップ作業も楽になるので以前から利用しています。
一方、CSS3 PIE については、同じような JavaScript ライブラリの中で最も丸角などの再現が正確だと感じましたので以前はよく使っていましたが、特定の条件が重なると正しく表示されないこともありますし、何より前述の Selectivizr と違い、余分なマークアップを加えることになります。そこで、最近はプログレッシブ・エンハンスメント(※)という考え方のもと、使用しなくなりました。
また、レスポンシブWebデザインを実現するための CSS3 Media Queries を IE6 から IE8 に対応させるための JavaScript ライブラリとして、css-mediaquries.js や Respond.js がありますが、そもそも IE8 以前をレスポンシブWebデザインに対応させる必要は無いと考え、当初からこれらは使用していません。
もっとも、これらの JavaScript ライブラリを使用することは、古いブラウザに対して更に表示を重くさせるなどの弊害もあり、使用の是非について意見が分かれる部分でもあるかと思います。
ところで、2014年8月にマイクロソフトからInternet Explorer のサポートポリシーの変更が発表されました。
2016年1月12日以降は使用しているオペレーティング システムでサポートされる、最新バージョンの Internet Explorer だけが、技術サポートとセキュリティ アップデートを受けられることになります。
つまり、現時点で Windows 7 は IE11 が、Windows Vista は IE9 が最新バージョンですので、あと半年余りで IE7 と IE8 はサポート対象から外れることになります。
そうなると、メーカーがサポートしないバージョンは対応しない(セキュリティの観点から最新バージョンへのアップグレードを勧める)という考えのもとでは、上記の JavaScript ライブラリも使わなくて済みますし、長年使ってきた CSS ハックもほとんど使わなくて済みそうです。
さらに、2017年4月には Windows Vista のサポート終了と合わせて IE9 がサポートから外れる予定ですので、text-shadow や multiple columns など、もっと多くの CSS3 のプロパティが活用できますね。
※プログレッシブ・エンハンスメント:どのユーザにも同じコンテンツを提供するが、モダンブラウザなどに対してはよりリッチな表現を提供し、古いブラウザには最低限の表現でコンテンツを提供するという考え方