HTML5の要素を条件付きコメントなしでIEで使う

今更ながら、ここもHTML5にしてみようかなという気持ちが湧いてきています。以前は、一旦公開した文書の形式を無闇に変えるのはよくないという思いが強かったのですが、個人のページなのだし色々と実験的なことをもっと試してもいいのでは、と思うようになったので。

さて、HTML5導入にあたり一番気にしていたのが、IEでHTML5の新しい要素を使う方法のことでした。今だと html5shiv を使って以下のようなコメントを入れるのが一般的になっているようです。

<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

しかしながら、HTML文書というのは様々な環境で利用されるための文書形式だと自分は考えているので、その中に(コメントとは言え)特定のブラウザのための記述を入れることには抵抗があったのでした。そこで、上記のような条件付きコメントを使わずに、IEでHTML5の新しい要素を使う方法をここ数日模索しており、何とか方法が見つかりましたので以下に紹介する次第です。

ひとまずサンプルをどうぞ。

他に使用しているファイルは以下の通りです。

見ての通り、以前に角丸の表示で利用していた、IEの DHTML Behaviors を利用しました。これだとHTML文書に適用するCSSの中で、

body {
  behavior:url(./html5.htc);
}

というようなルールを追加するだけなので、HTML5文書自体には余計な記述を追加することなく利用できます。

なお、html5.htc の中では html5shiv のコードをほぼそのまま利用しています。

* * *

この html5.htc を作る過程の試行錯誤で、2点ほど学んだことがあったので覚え書き。

htcファイルの中から、HTML文書のdocumentオブジェクトは直接参照できない。 htcファイルのscript要素で document と書くと、それは「htcファイルのdocumentオブジェクト」ということになるようです。一方、behavior を適用した要素(body要素)は element で参照できるので、HTML文書の document オブジェクト、window オブジェクトを得るには以下のようにする必要がありました。

var doc = element.document;
var win = doc.parentWindow;

最後に element.innerHTML の更新が必要。 これをしなくてもhtcファイルのscript要素のスクリプトは実行されていたので、それで問題ないように思っていたのですが、実際はそれだけだとスタイルが適用されませんでした。色々試す中で、半ば自棄で element.innerHTML = element.innerHTML というコードを入れてみたところ、思いがけずそれでうまく行ってしまったのでした。おそらく代入によりHTML5新要素のタグが改めて解析されたのだろうと推測しますが、自身を代入することで結果が変わるというのは何とも不思議な感じです。

コードをより短くするため、element.innerHTML += '' と変更しました。