HTML5 イネーブリング・スクリプトとは？

HTML5 では新しい HTML 要素が多数導入されています。

要素の種類や意味はひとまずおいておきましょう。この記事のポイントは 「新しい要素がたくさん導入されて、互換性やらなにやら大丈夫なの？！」 というところです。

何が問題なのか？

現時点では依然として旧式のブラウザが多数使われています。特に不明な要素を受け取ったときの振る舞いが、シェアの多数を占める Firefox や Internet Explorer (IE) といったブラウザで違うのが問題になります。

具体的に問題を見てみましょう。次のような HTML を用意します。

<!DOCTYPE html>
<html>
<head>
<style>
article { display: block; border: 1px solid red; }
</style>
</head>
<body>
<article>
<h1>Hello, HTML5</h1>
<p>This is a test.</p>
</article>
</body>
</html>

ここでは article という要素が使用されており、その article の子要素として h1 と p が含まれています。そして、CSS で article の境界線を赤色に指定しています。

この HTML が Firefox 3.6 と IE8 でどのように表示されるか確認しましょう。

まず、Firefox の場合は次のように表示されました。

HTML5 イネーブリングスクリプト無し - Firefox

一方、IE8 の場合は次のように表示されました。

HTML5 イネーブリングスクリプト無し - IE8

IE8 では、赤色の枠を持つブロック要素となるべき article 要素が表示されていません。

上では Firefox では article をブロック要素として正しく認識していますが、問題は IE8 です。実は IE8 では事前に定義されていない不明な article 要素を、子要素なしの空要素として作成します。このため、画面上に現れてきません。

このように、主要なブラウザ間で動作が大きく異なるのは問題です。この問題を回避するのが HTML5 イネーブリング・スクリプト (HTML5 Enabling Script) として知られているスクリプトです。

IE8 の問題の回避方法

この問題を回避する簡単な方法が知られています。

IE では事前に同じ名前の要素を document.createElement で作成しておくと、その要素を認識します。必ずしも createElement で作成した要素そのものでなくてもかまいません。そのページで一度、同じ名前の要素を作っておくだけで OK です。

そこで、上の HTML を次のように修正します。

<!DOCTYPE html>
<html>
<head>
<style>
     article { display: block; border: 1px solid red; }
</style><script>document.createElement('article');</script>
</head>
<body>
<article>
<h1>Hello, HTML5</h1>
<p>This is a test.</p>
</article>
</body>
</html>

変更点は黄色で示した箇所で、単に article という要素を作っているだけです。作った要素を参照はしていません。

このように変更した上で、IE8 でもう一度表示を確認します。

HTML5 イネーブリングスクリプト有 - IE8

今度は上のように article 要素が Firefox と同様に、h1 や p を含む要素として認識されました。

ちなみに、この回避方法は IE6 などでも有効であることが知られています。また、この問題自体は IE9 では発生しないことが確認されています。このため、条件付きコメントを利用して次のように書いておくとよいです。

<!DOCTYPE html>
<html>
<head>
<style>
     article { display: block; border: 1px solid red; }
</style>
<--[if lt IE 9]>
<script>document.createElement('article');</script>
<![endif]-->
</head>
<body>
<article>
<h1>Hello, HTML5</h1>
<p>This is a test.</p>
</article>
</body>
</html>

<--[if lt IE 9]> から <![endif]--> までの部分は条件付きコメントで、IE 9 以前のときだけ有効に働きます。それ以外のときは単なるコメントとしてみなされます。

このように、HTML5 で導入された HTML 要素をあらかじめ作成しておくことで、同様な不明な要素問題を解決するのが HTML5 イネーブリング・スクリプト として知られているものです。

Google Code Project でホストされている HTML5 IE イネーブリングスクリプト

article だけではなく、HTML5 で導入される HTML 要素を含む完全なスクリプトは次のコードで利用できます。

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

HTML5 イネーブリング・スクリプトとは？

何が問題なのか？

IE8 の問題の回避方法

Google Code Project でホストされている HTML5 IE イネーブリング スクリプト

Google Code Project でホストされている HTML5 IE イネーブリングスクリプト