ぼやき

0

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 での表示のスクリーンショットを載せておきます。

IE8
20120825_1.png

IE7
20120825_2.png

IE6
20120825_3.png

ひどい! 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 ではほぼまともに見られるようになりました。

CSS3 PIE 適応後の IE の表示

以下、各 IE でのキャプチャ。

IE8
20120825_4.png

IE7
20120825_5.png

IE6
20120825_6.png

IE6 と IE7 では擬似要素が使えないので、一部表示されていませんが、装飾部分なのでよしとします。IE6 は float したマージンが2倍になってしまってカラム落ちしています。検索ボックスも横長すぎです。面倒なので直していません。アンダーバーハックしないとだめかな。

あと IE8 で HOME のアイキャッチがなぜか表示されません。IE6 と IE7 では表示されているので原因がわかりません。

関連記事