HTML5+CSS3をIE8以下にも適用させる方法。html5shiv.js & PIE.htc

HTML5とCSS3をIE8以下でも対応させる覚書です。

html5shiv.js

以前は下記のようにGoogle Codeへの直リンクで読み込ませる方法が多かったのですが。

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

これが2012年初頭より、フォルダ内のhtml5shiv.jsもしくはhtml5shiv-printshiv.jsをサイト内の任意ディレクトリに格納して読み込むように仕様変更されていました。

GoogleCode download html5shiv

html5shiv.jsファイルの場所は環境に応じて変更

<!--[if lt IE 9]>
<script src="html5shiv.js"></script>
<![endif]-->

html5shiv.jsとhtml5-printshiv.jsの違いですが、html5shiv-printshiv.jsは印刷用のサポートもされているという違いのようです。

html5の新要素はデフォルトでインライン要素として表示されるので、表示崩れを防ぐたにCSSでブロック要素に置き換える記述をします。

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

CSS3PIE（PIE.htc）

CSS3 PIEのジェネレーターを使って生成したCSS3のソースコードをPIE.htcファイルと一緒に読み込み、IE8以前にCSS3のスタイルを適用させます。

CSS3PIE

PIE.htcをCSS3を記述したCSSファイル内で読み込む。

#btnstyle {
border: 1px solid #696;
padding: 60px 0;
text-align: center; width: 200px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: #666 0px 2px 3px;
-moz-box-shadow: #666 0px 2px 3px;
box-shadow: #666 0px 2px 3px;
background: #EEFF99;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#EEFF99), to(#66EE33));
background: -webkit-linear-gradient(#EEFF99, #66EE33);
background: -moz-linear-gradient(#EEFF99, #66EE33);
background: -ms-linear-gradient(#EEFF99, #66EE33);
background: -o-linear-gradient(#EEFF99, #66EE33);
background: linear-gradient(#EEFF99, #66EE33);
-pie-background: linear-gradient(#EEFF99, #66EE33);
behavior: url(/css/PIE.htc);
}

PIE.htcで適応できるCSSは

1. 角丸（border-radius）
2. シャドウ（box-shadow）
3. グラデーション（linear-gradient）

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

既存の各スタイルシートの一番最後に、behaviorスクリプトとして「PIE.htc」を指定する。
※サイトルートからの絶対配置。