ハナモゲラボ / 試行錯誤の実験人生

日々、PCや各種デバイス、楽器等に翻弄されながら電脳の森をさまよう男の日常と様々な実験をさらりと記しております。

IE8以下にHTML5をどうやって表示させるかの諸々

April 06 2012

先日、いよいよというべきか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というスクリプトです。

http://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対応しなきゃならない場合でも
それを解決してくれるライブラリもあるので安心ですね。

| Posted in CSS | Comments (0)

Post a Comment

※メールアドレス、URLは任意入力です。メールアドレスは入力しても公開されません。

« Dec 2017 January 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31