トイレのうず

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

IE8 : CSS3 PIE 適応前
IE7 : CSS3 PIE 適応前
IE6 : CSS3 PIE 適応前

ひどい!  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 : CSS3 PIE 適応後
IE7 : CSS3 PIE 適応後
IE6 : CSS3 PIE 適応後

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

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

関連記事

IE8 で閲覧して人が結構いるみたい
Web制作Windows
6月1日〜7日までの各ブラウザ閲覧比率
【 CSS 】画像置換の方法を変更してみた
Web制作
thumbnail
ハッスルサーバーが PHP5 に対応する!
WordPressWeb制作
thumbnail
【痛恨】スパム判定くらったみたい
Web制作
thumbnail
【検証】 Apache ログを詳しく見てみる 〜 WordPress を Yahoo! ブログ検索させる方法 その 4 〜
WordPressWeb制作
thumbnail
【経過】 Feed をリダイレクトしてみたが 〜 WordPress を Yahoo! ブログ検索させる方法 その 6 〜
WordPressWeb制作
thumbnail