Hebikuzure's Tech Memo

2011年7月12日

IE10 の HTML5 解析

Filed under: IE Blog — hebikuzure @ 10:29 PM

HTML5 Parsing in IE10
http://blogs.msdn.com/b/ie/archive/2011/07/06/html5-parsing-in-ie10.aspx

IE Blog の記事も IE10 Platform Preview が出て以降、IE10 についての記事が増えてきています。今回は IE10 での HTML 解析の変更点についての記事を私訳しました。条件付きコメントの廃止や DOM 解析の変更など、開発者に影響のある変更もされるようですね。

以下の文章は IE Blog の 7/6 の記事 HTML5 Parsing in IE10 を hebikuzure が私的に試訳したものです。翻訳については Microsoft Corporation および日本マイクロソフト株式会社とは無関係に hebikuzure が公開情報に基づき独自に行ったものであり、この文書の内容についての文責は公開者である hebikuzure にあります。翻訳の内容および技術的内容については正確を期すよう十分な注意を払っておりますが、誤りや不正確な部分が含まれている可能性がありますので、本文書を利用される際には原文も併せてご確認ください。


IE10 HTML5 解析

2011年7月6日 午後2時47分

Web 開発者が同じマークアップと同じコードを使い、異なるブラウザー間で同じ結果が得られる時、より良いものになります。2番目の IE10 platform preview は HTML5 解析アルゴリズムを全面的にサポートする事で、この領域に進歩をもたらしました。

先のリリース以降の IE の HTML パーサーを強化するこの継続的な取り組みは、より多くの HTML が異なるブラウザー間で同じように “うまく機能する” 事を目指しています。その主な例には、HTML 内の SVG のサポート、HTML5 のセマンティック要素のサポート、未知の要素の構造の保存、ホワイトスペースの取り扱いの改善などが含まれています。こうした取り組みの結果として、多くの HTML 解析は IE9 と他のブラウザーの間で同じになりました。

適正な動作にする

この取り組みの目標は、どのモダン ブラウザーでもすべての HTML 解析が同一となるのを確実にする事です。 HTML5 は、ほとんど起こりそうにないエッジ ケースやエラー条件に至るまで、HTML 解析ルールを全面的に定義した初めてのバージョンの HTML となったので、この目標が可能となりました。もしも皆さんのマークアップが不正であっても、HTML5 では依然としてそれをどのように解析するのか定義されており、IE10 はそれらのルールに従います。以下の例は、これらの改善の一部として修正されたケースを示しています。

HTML

DOM ( HTML5 + IE10 )

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 開発者ツールを通じて HTML 解析エラーを報告するようになりました。

レガシーな機能の削除

古いバージョンの IE のいくつかの機能は HTML5 解析と互換性が無いため、IE10 モードからはそれらの機能を削除する事にしました。そのようなレガシーな機能に依存しているサイトも、依然としてレガシー モードで動作します。この方法により、現在動作しているサイトは、開発者が更新する時間をまったく持てなくとも、IE10 で引き続き動作します。

条件付きコメント

<!–[if IE]>
This content is ignored in IE10 and other browsers.
In older versions of IE it renders as part of the page.
IE10 やその他のブラウザーでは、このコメントは無視されます。
以前のバージョンの IE ではページの一部として描画されます。
<![endif]–>

これは条件付きコメントが依然として有効であるものの、古いバージョンの IE のみをターゲットにする事を意味しています。もしより新しいブラウザー間の識別が必用であれば、代わりに機能の検知を利用すべきです

エレメント ビヘイビア

<html xmlns:my>
<?import namespace="my" implementation="my.htc">
<my:element>
This parses as an unknown element in IE10 and other browsers.
In older versions of IE it binds to "my.htc".
IE10 やその他のブラウザーでは、ここは未知の要素として解析されます。
以前のバージョンの IE では “my.htc” にバインドされます。
</my:element>
</html>

XML データ アイランド

<xml>
This parses as <b>HTML</b> in IE10 and other browsers.
In older versions of IE it parses as XML.
IE10 やその他のブラウザーでは、この部分は <b>HTML</b> として解析されます。
以前のバージョンの IE では、XML として解析されます。
</xml>

フィードバックを歓迎します

私たちは (innerHTML を経由したものを含め)、すべての HTML 解析が異なるブラウザーを通じて一貫性を持つ事を確実にするため、皆さんのフィードバックを歓迎しています。IE10 platform preview 2 をダウンロードして、それを利用し、見つけたバグはどんなものでも Connect を通じて報告してください。

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

WordPress.com Blog.

%d人のブロガーが「いいね」をつけました。