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 開発者ツールで解析エラーが報告されるようになりました。
レガシ機能の削除
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>
ここの記述は、IE10 と他のブラウザーでは <b>HTML</b> として解析されます。
IE の以前のバージョンでは、XML として解析されます。
</xml>
フィードバックをお待ちしています
皆様のフィードバックを参考に、すべての HTML (innerHTML を用いたものも含む) が異なるブラウザー間で同様に解析されるよう、さらなる改良を進めていきます。ぜひ、IE10 platform preview 2 をダウンロードして使ってみてください。もしバグを発見した場合は、Connect からご報告をお願いいたします。
—Tony Ross、Internet Explorer プログラム マネージャー