先日、いよいよというべきかHTML5での指定案件がありました。

Google ChromeやFirefox、Safariなどのいわゆるモダンブラウザは
HTML5+CSS3への対応も早くてあまり支障もないのですが
IE8ですらHTML5のタグが認識できない、というのは困りもの。
未だに使用されている事の多い、WindowsXPに至っては事実上IE8が最終バージョン。
となると、WindowsXPの人はごめんね！って事になってしまうのである。

そこで見つけたのがこのブログでした。
HTML5 & CSS3のクロスブラウザー対応方法まとめ
（http://mae.chab.in/archives/1463）

ここにはとてもわかりやすくまとめてありました。

まずはIE8以下にHTML5の新要素を認識させる

articleやaside,sectionなどの新要素をIE8以下に認識させるためには
Google Codeで公開されているhtml5shivというライブラリを使います。
それをheadタグ内に条件分岐を使って以下の様にリンクさせます。

<!--&#91;if lt IE 9&#93;>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<!&#91;endif&#93;-->

これでIE8以下でもHTML5の新要素が認識されるようになりました。

その新要素達をCSSでブロック要素だと定義する。

IE8以下のデフォルトCSSにはこの新要素がないのでそれを定義してやります。

article,aside,canvas,details,figcaption,figure,
footer,header,hgroup,menu,nav,section,summary{
display:block;
}

自分はリセットCSSにこいつを組み込みました。

CSS3をIE8以下に対応させる

CSS3には角丸やシャドウ表現などの新しいスタイルが増えましたが
これもライブラリを使ってIE8以下でも使う事ができます。
PIE.htcというスクリプトです。

Screenshot of css3pie.com
ここで入手が可能です。

PIE.htcが現在対応しているのは以下の5つのスタイル
・border-radius
・border-image
・multiple background images
・box-shadow
・linear-gradient as background image
角丸だけでもなんともありがたい！

適用させたいスタイルの一番後ろに

behavior:url("PIE.htc");
position:relative;

と書いてやればいいのですが、AlphaImageLoaderと同じく
HTMLファイルからの相対パスとなるので、めんどくさければ絶対パス指定の方が楽です。

今回の案件はIE6は無視していいとの事だったんでこの3つだけで充分でした。
透過pngなどの問題が絡んできた上にどうしてもIE6対応しなきゃならない場合でも
それを解決してくれるライブラリもあるので安心ですね。