Share via


IE10 の HTML5 解析

本記事は、マイクロソフト本社の IE チームのブログ から記事を抜粋し、翻訳したものです。 

【元記事】HTML5 Parsing in IE10 (2011/7/7 6:47 AM)

Web 開発においては、さまざまなブラウザー間で同じマークアップと同じコードを使って、同じ結果を得られることが望まれます。IE10 platform preview 2 は、HTML5 解析アルゴリズムを完全にサポートすることにより、この目標に一歩近づきました。

マイクロソフトは以前のリリースから継続してこの課題に取り組んでおり、より多くの HTML が異なるブラウザー間で "そのまま" 動作することを目指して、IE の HTML パーサーを改良し続けています。主な改良点として、インライン SVG のサポート、HTML5 セマンティック要素のサポート、不明な要素に対する構造の維持、空白処理の改善などが挙げられます。この取り組みの結果、HTML の大半は、IE9 とその他のブラウザーで同様に解析されるようになりました。

正しい動作の適用

この取り組みの目標は、すべての HTML を、現在使用されているさまざまなブラウザー間で同様に解析できるようにすることです。これが実現可能であると考えるのは、HTML5 は、HTML として初めて、発生する確率の極めて低いエッジ ケースやエラー条件に至るまで、あらゆるケースに対応した HTML 解析ルールを定義しているからです。HTML5 は、誤って記述されたマークアップについても解析方法を定義しており、IE10 はこれらのルールに準拠しています。今回の改良点の一部として、修正された箇所を以下に示します。

HTML

IE10 の HTML5 解析

DOM ( IE9 )

<b>1<i>2</b>

|- <b>    |- "1"   |- <i>   |- "2"

|- <b>   |- "1"   |- <i>   |- "2" |- <i>

<p>Test 1 < object> <p>Test 2 < /object>

|- <p>    |- "Test 1\n"  |- <object>    |- "\n "   |- <p>   |- "Test 2\n"

|- <p>   |- "Test 1\n"  |- <object>   |- "\n " |- <p>   |- "Test 2\n"

相互運用可能な innerHTML

今回のリリースでは、innerHTML も改善されており、今後は以下のようなパターンのコードが、IE10 で期待どおりに動作するようになります。

var select = document.createElement("select");
select.innerHTML = "<option>one</option><option>two</option>";
var table = document.createElement("table");
table.innerHTML = "<tr><td>one</td><td>two</td></tr>";

開発者に嬉しいエラー報告

HTML5 では、あらゆるマークアップが一貫した方法で解析されます。とはいえ、開発者は間違ったマークアップの記述を避けることを第一に考えるべきでしょう。有効なマークアップを記述すれば、サイトが期待どおりに動作しやすくなり、過去のバージョンのブラウザーとの互換性確保にもつながります。

開発者のこうしたニーズを考慮して、IE10 では F12 開発者ツールで解析エラーが報告されるようになりました。

clip_image002

レガシ機能の削除

IE のこれまでのバージョンで使われていた一部の機能は、HTML5 解析と互換性がないため、IE10 モードから削除されています。このようなレガシ機能を利用しているサイトも、レガシ モードで実行することにより、引き続き動作します。開発者がサイトを更新する時間がなかったとしても、この方法により、現在動作しているサイトは IE10 でも問題なく動作します。

条件付きコメント

<!--[if IE]>
ここの記述は、IE10 と他のブラウザーでは無視されます。
IE の以前のバージョンではページの一部として表示されます。
<![endif]-->

条件付きコメントは従来どおり使用できますが、IE の以前のバージョンでのみ有効になります。最新のブラウザーを判別するには、フィーチャー ディテクション ( 機能検出) を使用してください

エレメント ビヘイビア

<html xmlns:my>
<?import namespace="my" implementation="my.htc">
<my:element>
ここの記述は、IE10 と他のブラウザーでは不明な要素として解析されます。
IE の以前のバージョンでは、"my.htc" にバインドされます。
</my:element>
</html>

XML データ アイランド

<xml>
ここの記述は、IE10 と他のブラウザーでは <b>HTML</b> として解析されます。
IE の以前のバージョンでは、XML として解析されます。
</xml>

フィードバックをお待ちしています

皆様のフィードバックを参考に、すべての HTML (innerHTML を用いたものも含む) が異なるブラウザー間で同様に解析されるよう、さらなる改良を進めていきます。ぜひ、IE10 platform preview 2 をダウンロードして使ってみてください。もしバグを発見した場合は、Connect からご報告をお願いいたします。

—Tony Ross、Internet Explorer プログラム マネージャー