2011年12月1日 | WordPress Tips | No Comments |
Web ページを作る際に、IE のバグ取りは重要な作業です。HTML5 でコーディングをするにあたっても、壁となるのはやはり IE です。
IE8 以下では、HTML5 の要素に CSS が適用されません。
IE8 以下で、CSS を適応させるための方法として、WordPress の Twenty Eleven テーマにも採用される html5.js というスクリプトがあります。
html5.js を head 内に記述
html5.js のようなスクリプトを使用する場合は、以下のように条件付きコメントを使って、IE9 以前の IE6, 7, 8 に適用させる方法があります。
<!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js" type="text/javascript"></script> <![endif]-->
html5.js を使う場合は、CSS で以下を定義
HTML5 の要素を、display:block; させる。
<style type="text/css">
article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary {
display:block;
}
</style>
これで、他のモダンブラウザと同じよう !? に IE6, 7, 8 でも、HTML5 でコーディングすることができます。
ところで、html5.js は何をやっているの？
使い方はわかりましたが、html5.js 内は何をやっているのか気になります。認識していたほうが、やはり良いだろうということで、ちょっと調べてみました。
HTML5 の要素を document.createElement()
以下に記述してある HTML5 の要素を Javasprict で document.createElement() することによって認識できるようにしている。
- abbr
- article
- aside
- audio
- canvas
- details
- figcaption
- figure
- footer
- header
- hgroup
- mark
- meter
- nav
- output
- progress
- section
- summary
- time
- video
IE6, 7, 8 で印刷するための CSS を処理
HTML5 の要素は、IE6, 7, 8 で印刷すると崩れてしまいます。印刷するための CSS を処理しています。
※ 印刷に関しては、html5.js を使用しても正確に印刷されない場合があるようですので気をつけてください。
Post a comment.