HTML5で作成するときのIE対応

ここ最近Webサイトの傾向として、様々な企業やブランドがHTML5を導入したサイトを利用するようになってきています。
基本的にHTML5から導入された、新しいhtmlタグやCSSの属性などへのブラウザ対応がまちまちで、皆が様子を見ていたような気がしますが、JavaScriptを使用してHTML5未対応のIE6～8間に対応が可能になってきたことをキッカケにHTML5を使用したサイトが急激に増えてきました。そこで、それぞれのブラウザの対応状況やHTML5のIE対策方法に関して記録しておきます。

ブラウザの対応状況

まずは、自分が普段使用しているブラウザのHTML5対応状況を確認してみます。

私が普段使用しているブラウザは以下になります。

・Google Chrome　32.0.1700.76
・Firefox　26.0
・Internet Explorer　10.0.9200.16750
・Safari　5.1.7
・Opera　18.0.1284.68

そして、それぞれのブラウザがどれくらいHTML5対応になっているかをチェックしてみます。

チェックできるサイトはこちらHTML5TEST

your browser
自分の現在使用しているブラウザのスコアが確認できます。

other browsers
様々なブラウザのバージョンのスコアが掲載されており、スコアが高いほどHTML5に対応しているということがわかります。

私が普段使用しているブラウザのスコアは以下のようになりました。

Google Chrome	32.0.1700.76	503/555
Firefox	26.0	442/555
Internet Explorer	10.0.9200.16750	335/555
Safari	5.1.7	260/555
Opera	18.0.1284.68	492/555

現在のブラウザシェア

各国や世界で利用されているブラウザのシェア率を確認してみます。

Stats Counter

▼日本国内（2012年2月から2014年1月までのシェア率）

1位	Internet Explorer	49.38%
2位	Google Chrome	23.94%
3位	Firefox	13.21%
4位	Safari	9.24%
5位	Opera	1.05%

▼世界（2012年2月から2014年1月までのシェア率）

1位	Google Chrome	37.1%
2位	Internet Explorer	30.09%
3位	Firefox	21.59%
4位	Safari	7.91%
5位	Opera	1.39%

こうして見てみると、海外ではChromeが37.1%で1位、日本国内ではInterbet Explorerが飛びぬけて49.38%で1位をキープし続けています。IEに関して言えば、HTML5はバージョン8以降にしか対応していませんので、国内サイトにとっては悩ましい問題になっています。

HTML5とCSS3のサポート状況

各ブラウザごとのHTML5とCSS3のサポートの状況を確認してみましょう。

findmebyIP

IEの対応表示がほとんど「×」になっています。
HTML5から便利な新しい要素が数多く追加されましたが、IE8以下ではそのHTML5の新要素に対応していないので、要素が無視されスタイルなどが適用されない状況にあります。つまりは、IE8以下で閲覧しているユーザーのブラウザにだけ正確に表示されないということが起きてしまいます。そこでIEにHTML5の新要素を認識させる方法が開発されました。

IEのHTML5対応

HTML文書内にIEに対応させるためのライブラリを読み込ませることで、IEの下位のバージョンでもある程度認識させることが可能になりました。ただし、全ての要素に対応するというわけではないので、HTML5+CSS3を適用した箇所は、必ず正常に動作しているか検証するのは忘れないようにしましょう。

▼IE対応によく使われているライブラリ

html5shiv

IE8以前のブラウザにも、基本的なHTML5タグを認識させるためのライブラリです。

以下のコードをheadタグに記載します。

<!--[if lt IE 9]>
<script src="任意のディレクトリ/html5shiv.js"></script>
<![endif]-->

<!--[if lt IE 9]>

<![endif]-->

CSS3 PIE

JavaScriptを使ってIE6～8のCSS3プロパティを表示可能にします。
角丸、シャドウ、ボーダー画像、複数背景画像、グラデーションに対応。「PIE.htc」というファイル名で配布されているので、このファイルを、IEの独自拡張である「behaviorプロパティ」の値に指定すると、IE6～8でもCSS3プロパティを使ったデザインが表示可能になります。対応しているCSS3プロパティは少数ですが、ボックスを角丸にしたり、ドロップシャドウをつけたり、使用頻度の高い効果を実現できます。

CSSのプロパティを使ったスタイルシートの末尾に、behaviorプロパティを記述し、値に「PIE.htc」ファイルへの絶対パスを記述します。

例えば、box-shadowプロパティを使って<h1>要素に影を付ける場合は、以下のように記述します。

h1 {
	box-shadow: 5px 5px 5px #000;
	behavior: url("/PIE.htc");
}

h1 {

box-shadow: 5px 5px 5px #000;

behavior: url("/PIE.htc");

}

※注意しなければならない点は、この「PIE.htc」のファイル指定ですが、CSSからの相対パスではなくHTMLからの相対パス指定をしなければならないので、混乱を避ける為に絶対パスで記述することをオススメします。

例えば、
http://www.sample.jp/PIE.htcであれば、

url(“/PIE.htc”);

http://www.sample.jp/file/PIE.htcであれば、

url(“/file/PIE.htc”);

と記述します。

▽CSS3 PIEを使ってもうまく表示されない場合

◆ position: relative;を追記する

behaviorプロパティを使って「PIE.htc」ファイルを指定した際に、背景色や枠線など一部のスタイルが効かなくなってしまうことがありますので、その際は、behaviorプロパティを記述した箇所に、下記のようにpositionプロパティを加えてみます。

position: relative;

1	position: relative;

◆ .htaccessファイルに記述を加える

ウェブサーバによっては、.htaccessファイルに以下の1行を追記しないと、うまく動かないことがあります。

AddType text/x-component .htc

1	AddType text/x-component .htc

ie9.js

IE6～8でもセレクタを使えるようにするJavaScriptで開発されたライブラリのひとつです。「W3C標準に仕様を近づける」「IE9に近づける」ためのライブラリなので、出来なくなる事もありますので注意してください。

<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->

<!--[if lt IE 9]>

<![endif]-->

Selectivizr.js

IE6～8でもCSS3セレクタが利用できるようになりますが、使えるセレクタの種類はライブラリによって異なります。