Note
Access to this page requires authorization. You can try signing in or changing directories.
Access to this page requires authorization. You can try changing directories.
本記事は、マイクロソフト本社の 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 プログラム マネージャー