HTML5入門－html5.jsでIE対応－

110208_i

下の記事でとりあえずchromeでテストしたのですが、IEは対応していませんでした。
IEを無視するわけにもいかないので、現時点で使える簡単な対応策を調べてみました。
HTML5入門－とりあえず5で書いてみた－

Javascriptで対応させる

はい。Javascriptを使います。
GoogleさんがIEでhtml5から加わった新要素(header等)を
使えるようにするライブラリを公開しているので、これを読み込みます。
html5shiv

IE9以外のIEでのみ読み込みたいのでifで囲ってあります。 

<!DOCTYPE html>
<html lang="ja">
<head>
		<meta charset="UTF-8" />
		<title>HTML5入門-html5.jsでIE対応-</title>
		<link rel="stylesheet" href="style.css" />
		<!--[if lt IE 9]>
		<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->
</head>

html5.jsの中

読み込んだhtml5.jsの中では、以下が行われているようです。

  • 新たらしい要素を使えるようにする
  • IEで印刷が崩れないようにCSSで調整

早速読み込ませてみました

まず昨日の状態をIE8で確認してみます。

IEで見る
html5.js適用前 IE8

HTML5で追加されたheader,footer,article要素が見事に死んでます。
ではhtml5.jsを読み込んでみましょう。
↓↓

IEでみる
html5.js適用後 IE8

とりあえずheader、footer、articleはいけてるのではないでしょうか。

まとめ

header、footer、articleの3つの新要素がIEで使えることが分かりました。
次回から他の要素も追加してテストしていきます。
やっとスタート地点に立てた感じです。

参考にしたサイト