HTML5のInternet Explorer対応
次世代のマークアップ言語HTML5。一部では利用が始まっています。
FirefoxやGoogle Chrome、iPhoneでは対応されており、モダンブラウザの中ではIE（バージョン8でも）だけがサポートしてません。W3Cからの正式な勧告は今年中には出るといわれています。
またもマイクロソフトは制作者の足かせを作ってしまいました。
ですがまったく使えないというわけではありません。
HTML5の大きな変化は、新たに要素が追加された点です。これは検索エンジンがより内容を拾いやすいようにということらしいです。
HTML5.JPでも紹介されている内容や雑誌で見た情報によると、アニメーションを動的に生成するCanvasという仕様が盛り込まれており、未実装のIEにもjQueryプラグインで実装可能なのだとか。実際AppleはAdobe Flashを批判し、これに移行すべきと言っています。
ということもあり、問題はブラウザの依存関係ではなく、リッチコンテンツの制作にも大きく響きそうです。
前置きが長くなりましたが、IEでHTML5を使えるようにする方法です。
一番の問題は新たに追加された要素がIEでは認識されず、CSSのレイアウトや一部で表示できないものがあるということです。これの解決方法は単純でJavaScriptでcreateElementしてやればいいだけなのです。
document.createElement('footer');
気になっていたのですが、これはたとえば属性値が違うもの（idやclassなど）に関係なく、単にその要素をドキュメント上に作成するだけで、それぞれのスタイルが適用されます。つまりid="wrapper"のsection要素を作ったり、id="rightColumn"のsection要素を作ったりするのではなく、document.createElement('section')とするだけでいいのです。
しかしこれには注意があって、例によってonloadやdomReadyのときに生成してもうまく動いてくれません。その時点では要素はもう既に読み込まれたあとなので、HTML5の要素をcreateElementするのは順番に読み込まれたときでなければいけません。
以下のページでHTML5で追加されたすべての要素を生成してくれるJavaScriptが配布されています。これをできるだけ早い段階（HEADタグのすべてのSCRIPTタグの前）で読み込んでやればいいわけです。
コメント