サイト開発者が利用できる IE の互換性機能
本記事は、マイクロソフト本社の IE チームのブログ から記事を抜粋し、翻訳したものです。
【元記事】IE’s Compatibility Features for Site Developers 2010/6/17 11:26 AM
サイト開発者は、既存サイトの下位互換性を維持しつつも、新しいテクノロジでの相互運用性と標準への準拠 ("同じマークアップ") を実現したいと常に考えていることでしょう。今回は、互換性に関するいくつかのブログ記事 (例 1、例 2、例 3) への質問とコメントに基づき、サイト開発者が利用できる IE の互換性機能をもう一度まとめておきたいと思います。
IE が変更され、新しいテクノロジのサポートが実装されても、シナリオによっては IE の旧バージョンの動作が望まれる場合があります。IE がサイトのマークアップをどのように実行するかを調整する手段はいくつかあり、この調整はさまざまなテクノロジを使って開発者側で行うことができます。主なテクノロジとしては、IE 開発者ツールのブラウザーモードとドキュメントモード、X-UA-Compatible meta タグと HTTP ヘッダー、条件付きコメントがあります。IE によるドキュメントモードの決定方法も、開発者の皆様から寄せられたご提案に基づき IE9 では更新されました。
ブラウザー モードとドキュメント モード
ブログのコメントに多い質問がブラウザー モードとドキュメント モードの違いです。開発者ツールの [ブラウザー モード] メニューと [ドキュメント モード] メニューについては、MSDN にわかりやすい記事 (記事 1、記事 2) がありますので参照してください。ここでは、これらのメニューを使って Web サイトをテストする方法を改めて説明します。
ブラウザーモードは、IE がサーバーに送信するユーザーエージェント (UA) 文字列、IE が既定とするドキュメント モード、そして IE による条件付きコメントの評価方法 (これについては後で説明します) を決定します。既定では IE9 のブラウザー モードは IE9、IE8 のブラウザー モードは IE8 です。開発者は、IE 開発者ツールの [ブラウザー モード] メニュー項目を使ってブラウザー モードを変更できます。ユーザーは、サイトの表示中に互換表示ボタンを手動でクリックするとブラウザー モードを変更できます。また、多くのユーザーが互換性表示一覧への追加機能を活用しています。マイクロソフトはコミュニティとの連携のもと、互換性表示一覧を常に更新しています。
ブラウザーモード |
説明 |
IE9 |
IE9 は、既定のブラウザー動作 (IE9 の中で最も標準に準拠しているモード) を示す UA 文字列、バージョン ベクター、およびドキュメント モードを報告します。このモードを使うと、IE9 を使うユーザーのサイト エクスペリエンスをテストできます。 |
IE9 互換表示 |
IE9 は、IE7 として UA 文字列、バージョン ベクター、およびドキュメント モードを報告します。ただし UA 文字列に含まれる Trident/5.0 トークンによって、実際のブラウザーが IE9 であることが識別されます。このモードを使うと、IE9 のユーザーが互換表示ボタンをクリックした場合のサイト エクスペリエンスをテストできます。また、IE9 Platform Preview 2 の開発者ツールには互換表示オプションが 2 つありますが、これは既知の問題として報告されています。 |
IE8 |
IE9 は、IE8 として UA 文字列、バージョン ベクター、およびドキュメント モードを報告します。このモードを使うと、IE8 を使うユーザーのサイト エクスペリエンスをテストできます。 |
IE7 |
IE9 は、IE7 として UA 文字列、バージョン ベクター、およびドキュメント モードを報告します。このモードを使うと、IE7 を使うユーザーのサイト エクスペリエンスをテストできます。 |
ドキュメントモードは、IE の Trident エンジンがマークアップの表示に使用するモード (「IE9 標準」など) を指示します。ドキュメント モードを変更するとページは更新されますが、UA 文字列が再送信されたり、サーバーからマークアップが新たに取得されたりすることはありません。
ドキュメントモード |
説明 |
IE9 標準 |
IE9 が提供する、標準に準拠した最新の動作です。DOCTYPE が Strict または不明な Web ページを IE9 で表示する場合、既定でこのモードが使用されます。 |
IE8 標準 |
DOCTYPE が Strict または不明な Web ページを IE8 で表示するのと同じ動作です。 |
IE7 標準 |
DOCTYPE が Strict または不明な Web ページを IE7 で表示するのと同じ動作です。 |
Quirks |
DOCTYPE がないドキュメント、または DOCTYPE で古いタイプが指定されているドキュメントを IE で表示するのと同じ動作です。IE5 の動作、および IE6、IE7、IE8 の Quirks モードと同様の動作になります。 |
サイトのドキュメント モードを変更する
IE がサイトを表示するときに使うドキュメント モードは、開発者が決定できます。既定では、最も相互運用性が高く、最も標準に準拠したモードになります。つまり、IE9 では "IE9 標準" モードです。この既定のモードは、DOCTYPE、および X-UA-Compatible meta タグまたは HTTP ヘッダーを使って必要に応じて変更できます。サイトの表示に最適なモードは、IE 開発者ツールの [ドキュメント モード] を使って調べることができます。
特定の 1 ページだけドキュメント モードを変更する場合は meta タグを使うのが最も便利です。サイト内の多数のページのドキュメント モードをまとめて変更する場合は、HTTP ヘッダーの変更が便利です。
IE9 では、IE8 がサポートする値に加えて、X-UA-Compatible の値を新たに 2 つサポートします。
meta タグまたは HTTP ヘッダーの内容 (“IE=______”) |
説明 |
EmulateIE9 |
EmulateIE9 を指定すると、IE は DOCTYPE に基づきコンテンツの描画方法を決定します。DOCTYPE がない Web ページ、または DOCTYPE で古いタイプが指定されている Web ページは Quirks モードで表示されます。DOCTYPE で他の値が指定されている場合はすべて IE9 の標準モードで表示されます。 |
IE9 |
IE9 を指定すると、IE は DOCTYPE を無視して IE9 の標準モードで表示します。 |
IE9 の標準モードで表示したいと考えるサイト開発者には、X-UA-Compatible meta タグや HTTP ヘッダーではなく、標準の DOCTYPE を使用することを推奨します。これによって、いつでも標準ベースの同一のマークアップを実行するという目標に近づくことができます。
IE7 の標準モードでの解釈に依存している既存サイトでは、X-UA-Compatible meta タグまたは HTTP ヘッダーを使うことで、IE7 標準モードで表示されるようにすることができます。以下は、IE8 では IE7 標準モードで表示され、IE9 では IE9 標準モードで表示されるように値を組み合わせる例です。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
</head>
<body>
</body>
</html>
Apache サーバーまたは IIS サーバー上で HTTP ヘッダーを変更して一部またはすべてのページにこのロジックを追加すれば、多数のページに一括でこうした値を指定することができます。
"同じマークアップ" という目標を達成するため、IE8 から IE9 ではもう 1 つ変更が行われています。最上位のページが IE9 の標準モードで表示される場合、そのページに含まれるすべての IFrame が IE9 の標準モードで表示されるようになりました。唯一の例外として、Quirks モードが指定されている IFrame は Quirks モードで表示されます。
ブラウザーではなく機能を検出する ( 条件付きコメントの使用を避ける )
IE9 の標準モードでは、他のブラウザーと同じ標準ベースのマークアップが実行されることを目指しています。このため開発者には、IE9 および他のブラウザーの標準モードで実行したいときは機能および動作の検出を使用し、同じスタイルシートを使用することが推奨されています。
他のブラウザー ベンダーが採用していない IE の独自機能である条件付きコメント (説明 1、説明 2) ではなく、機能と動作の検出を使用することが強く推奨されます。ブラウザーが変わると動作しない条件付きコメントは "同じマークアップ" の条件を満たしません。
ただし、条件付きコメントの使用が適しているケースとして 1 つ、IE6 または IE7 のスタイルシートとの下位互換性を維持する場合があります。たとえば、hsn.com などの Web サイトは、条件付きコメントを使用して、IE7 で特定のスタイルシートを読み込むようにしています。
<!--[if IE 7]>
<link rel="stylesheet" href="http://css.hsn.com/css/ie7.css?v96" type="text/css" />
<![endif]-->
この機能は、既存サイトの下位互換性を維持するためのマイクロソフトの取り組みとして IE9 でもサポートされます。条件付きコメントを適用する場合に役立つルールを以下に示します。
条件付きコメントは既定で UA 文字列に関連付けられますが、互換性のために必要であれば、X-UA-Compatible meta タグまたは HTTP ヘッダーを使用して、各ページで特定のバージョンを指定できます。使用中の IE のバージョン (IE8 の場合 8、IE9 の場合 9) より大きい値、または 7 より小さい値が X-UA-Compatible で宣言されている場合は、X-UA-Compatible の値ではなく、引き続き UA 文字列の値が使用されます。
条件付きコメントの評価には、UA 文字列として送信された IE のバージョン番号が使用されます。この番号はバージョン ベクターと呼ばれます。たとえば IE7 の場合、UA 文字列のバージョン ベクターは 7 で、条件付きコメント <!--[if IE 7]> は true と評価されます。IE9 は、UA 文字列として、IE9 の値、または互換表示の値のいずれかを送信します。
UA 文字列
条件付きコメントによるバージョンベクターの評価結果
IE9
9
互換表示
7
このセクションの説明をまとめると、IE6 または IE7 用の CSS を条件的に読み込む場合には条件付きコメントを使用してよい、ということになります。それ以外の場合は機能と動作の検出を使用してください。
IE9 によるドキュメント モード決定方法の更新
IE9 によるドキュメント モードの決定方法を示す図 (SVG または PNG) が更新され、ここで説明した新しい X-UA-Compatible の値が追加されました。この図により、今回説明した機能すべてがどのように連携しているかをご確認いただけます。この図は皆様のご提案に基づき引き続き更新していく予定です。ありがとうございました。
Marc Silbey
プログラム マネージャー