【メモ】IEにCSS3を（だいたい）対応させた : トイレのうず／ブログ

HTML5 と CSS3 でサイトをデザインし直して 1 か月ほどたったのだけれど、 IE については内容がわかればいいか程度で HTML5 の対応だけして CSS 関係は放置していました。しかし実際確認してみてそのひどさに唖然としたので、今回対応をしました。

HTML5 を IE8 以下に解釈させる

メモがてら対応済みだった HTML5 の話から。 HTML5 では <header> タグや <footer> タグ、 <nav> タグなど新しい要素が増えたのだけれど、それを IE8 以下は解釈してくれません。これを解釈してくれるようにします。そこで登場するのが、 html5shiv (html5shim ともいう ) の html5.js という JavaScript ライブラリ。

→ Google Project Hosting ： html5shiv – HTML5 IE enabling script

これを IE9 未満で読み込むようにします。

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

この html5.js って何をしてるかっていうと、 HTML5 から加わった新要素に CSS が適応されるように JavaScript で要素を定義してやってるんですね。こんな感じ。

document.createElement("section");

1 つ 1 つ書くのは面倒だから、まとめてライブラリとして配布してくれてるんです。

次に HTML5 の新要素を CSS でブロック要素で定義します。使うものだけで OK 。

/* HTML5の新要素を定義 */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
    padding: 0; margin: 0;
}

IE8 未満は CSS3 未対応なため表示がめちゃくちゃ

それで対応前の衝撃だった IE での表示のスクリーンショットを載せておきます。

ひどい！　 CSS3 の角丸（ border-radius ）を多用して円形を主したデザインになってるからひどさが際立ってる！

CSS3 の IE8 以下への対応

CSS3 への対応は CSS3 PIE というのを使いました。ダウンロードして解凍したものの中から、「 PIE.htc 」とサーバーの適当なところにおきます。わたしは「 /js 」ディレクトリの中へ入れました。

CSS3 PIE で IE6 から IE8 で使えるようになる CSS3 のプロパティは下記の 5 つ。

border-radius ：角丸
box-shadow ：ボックスシャドウ
border-image ：画像ボーダー
multiple background images ：複数背景画像
linear-gradient as background image ：背景ライングラデーション

有効にするには CSS の対応させたい各セレクタのプロパティに「 behavior: url(/ 任意のパス /PIE.htc); 」と一行追加するだけです。角丸とシャドーを使ってるこのページのコンテンツエリアだったらこんな感じ。

#content {
	border-radius: 20px; 
	-moz-border-radius: 20px; 
	-webkit-border-radius: 20px; 
	box-shadow: 1px 1px 10px 0px rgba(00, 00, 00, 0.7);
	-moz-box-shadow:  1px 1px 10px 0px rgba(00, 00, 00, 0.7);
	-webkit-box-shadow: 1px 1px 10px 0px rgba(00, 00, 00, 0.7);
	behavior: url(/js/PIE.htc);　/* ←追加する */
}

グラデーションは独自プロパティ（ -pie-background ）を使う必要があります。このサイトのメニューバーの CSS だったらこんな感じ。

#header nav{
	background: #09577e;
	background: -webkit-linear-gradient(top, rgb(0, 124, 168) 0%, rgb(0, 82, 112) 61%, rgb(0, 70, 96) 100%);
	background: -o-linear-gradient(top, rgb(0, 124, 168) 0%, rgb(0, 82, 112) 61%, rgb(0, 70, 96) 100%);
	background: -ms-linear-gradient(top, rgb(0, 124, 168) 0%, rgb(0, 82, 112) 61%, rgb(0, 70, 96) 100%);
	background: -moz-linear-gradient(top, rgb(0, 124, 168) 0%, rgb(0, 82, 112) 61%, rgb(0, 70, 96) 100%);
	background: linear-gradient(top, rgb(0, 124, 168) 0%, rgb(0, 82, 112) 61%, rgb(0, 70, 96) 100%);
	-pie-background: linear-gradient(top, rgb(0, 124, 168) 0%, rgb(0, 82, 112) 61%, rgb(0, 70, 96) 100%);
	behavior: url(/js/PIE.htc);
}

これで IE8 ではほぼまともに見られるようになりました。