なんか作ろうと思ってて、丁度いいのでHTML5を使ってみようと思った。
今までなんも調べていなかったので、いろんなサイトを見ながら作ってみようと思った。

そんな中で役に立ったTipsや資料をあげてみようと思った。

まず、InternetExpplorer6,7でどうやって対応すれば良いのか調べた。
どうやら、新しいタグに対してスタイリングができないので、JavascriptでHTML5で新しく用意された要素をHTML上に置かないとその要素にスタイルを指定ものに対して、適用されないようだ。


<!--[if lte IE 8]>

<script type="text/javascript">
document.createElement( 'header' );
document.createElement( 'section' );
document.createElement( 'nav' );
document.createElement( 'aside' );
document.createElement( 'footer' );
document.createElement( 'article' );
document.createElement( 'time' );
</script>
<![endif]-->

Firefox2では、HTML5のタグに対してスタイルが適用されないようだ。

html5.jpによると、本来は・・・


<body>

<header><h1>Title</h1></header>

<article><p>...</p></article>

</body>

<code>

となるが、Firefox2では


<body>
<header></header>
<h1>Title</h1>
<article></article>
<p>...</p><code>
</body></code>

というふうにレンダリングされる。
この回避方法あるようだ。

有効なのは .htaccess を使ってGekko XHTMLとして読み込ませる方法良いみたい。HTMLファイルに


<code><html lang="en" xmlns="http://www.w3.org/1999/xhtml"></code>

xmlnsを入れる。

あとは、htaccessを用意する。

<pre><code>RewriteCond %{REQUEST_URI} \.html$
RewriteCond %{HTTP_USER_AGENT} rv:1\.(([1-8]|9pre|9a|9b[0-4])\.[0-9.]+).*Gecko
RewriteRule .* - [T=application/xhtml+xml]

これで、スタイルが適用されるようだ。
一番気になったIE6でもなんとか適用するみたいなので、気兼ねなくマークアップができる。
あとは、API関係とCSS3のブラウザ依存をどうするかを考えないとね。

次はCSS3について調べてみようと思う。

参考サイト
html5.jp
HTML5 を IE や Firefox 2 でも使えるようにする方法

関連記事