META タグと将来の互換性のロック

[アーティクル]
09/23/2008

注 : このドキュメントは暫定版であり、変更される場合があります。

ドキュメントの互換性は、Web 開発者にとっての重要な考慮事項です。Windows Internet Explorer 8 には、ドキュメント互換モードが用意されており、Web 開発者はブラウザが古いバージョンと同じ方法でページをレンダリングするように指定できます。これにより、開発者は更新の時期を調整することができます。

このドキュメントでは、Windows Internet Explorer 8 でサポートされるドキュメント互換モードについて説明し、カスタムヘッダーを使用してそれらのモードをページごとまたはサイトごとに実装する方法を解説します。適切な互換モードを実装することにより、サイトでは Windows Internet Explorer 8 およびそれ以降のバージョンとの互換性を確保できます。

各種の互換モード

Windows Internet Explorer 8 は多数の互換モードをサポートしており、互換モードに応じてさまざまな機能がサポートされます。互換モードによって、コンテンツのレンダリング方法も変わります。次に例を示します。

IE5 モードでは、Windows Internet Explorer 7 の Quirk モードで表示する場合と同様にコンテンツをレンダリングします。これは、Windows Internet Explorer 5 でコンテンツを表示した場合とよく似ています。

IE7 モードでは、ページに <!DOCTYPE> ディレクティブが含まれるかどうかに関係なく、Windows Internet Explorer 7 の標準モードで表示される場合と同様にコンテンツをレンダリングします。

EmulateIE7 モードでは、Windows Internet Explorer が <!DOCTYPE> ディレクティブを使用してコンテンツのレンダリング方法を決定します。標準モードのディレクティブは Windows Internet Explorer 7 標準モードで表示され、Quirk モードのディレクティブは IE5 モードで表示されます。IE7 モードとは異なり、EmulateIE7 モードでは <!DOCTYPE> ディレクティブが有効になります。多くの Web サイトでは、この互換モードが推奨されます。

IE8 モードでは、W3C CSS Level 2.1 仕様および W3C Selectors API、さらには W3C CSS Level 3 仕様 (草稿) の限定サポートも含めた、業界標準に対する現時点で最も互換性の高いサポートが得られます。

エッジモードでは、Windows Internet Explorer が利用できる最も互換性の高いモードでコンテンツを表示します。これは、実際には "ロックイン" パラダイムに違反します。Windows Internet Explorer 8 の場合は、IE8 モードと同じ動作になります。仮に、Windows Internet Explorer の将来のリリースでさらに互換性の高いモードがサポートされた場合、エッジモードに設定されたページは、そのバージョンでサポートされている最も互換性の高いモードで表示されます。ただし、それらのページを Windows Internet Explorer 8 で表示した場合には、IE8 モードで表示されます。Windows Internet Explorer の将来のバージョンでページのコンテンツをレンダリングしたときに予期しない結果が起こる可能性があるため、Web 開発者はエッジモードの使用をテストページや他の実用以外の目的に限定することをお勧めします。

互換モードをページごとに指定する

ドキュメントモードを Web ページに対して指定するには、META 要素を使用して、X-UA-Compatible http-equivヘッダーを Web ページに含めます。次の例では、EmulateIE7 モードの互換性を指定しています。

<html>
   <head>
   <!-- Internet Explorer 7 と同様に動作 -->
      <title>マイ Web ページ</title>
      <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
   </head>
   <body>
      <p>ここにコンテンツが入ります。</p>
   </body>
</html>

content 属性により、そのページのモードを指定します。たとえば、Windows Internet Explorer 7 と同様の動作を行うには、「IE=EmulateIE7」と指定します。同様に、「IE=5」、「IE=7」、または「IE=8」と指定することで、他の互換モードを選択できます。また、「IE=edge」と指定すれば、Windows Internet Explorer 8 に対して、利用できる最も互換性の高いモードを使用するよう指示できます。

X-UA-compatible ヘッダーでは、大文字と小文字が区別されません。ただし、他のすべての要素よりも先に (TITLE 要素と他の META 要素は除く)、Web ページのヘッダー (HEAD セクション) 内に記述される必要があります。

互換モードをサイトごとに指定する

Web サーバーを使用してサイトにカスタム HTTP 応答ヘッダーを定義することにより、Web サイトにドキュメントモードを指定できます。HTTP 応答ヘッダーは、HTTP 要求への応答としてブラウザに送信するファイルに Web サーバーが添付する情報であり、通常は送信するファイルの日付、サイズ、種類などの情報を含んでいます。

すべての Web ページにカスタム HTTP 応答ヘッダーを添付するよう Web サーバーを構成するために必要な手順については、以下のドキュメントに記載されています。そのように構成した場合、Windows Internet Explorer 8 は、EmulateIE7 など特定のドキュメント互換モードを使用するようになります。

Web サーバーを使用して既定のドキュメント互換モードを指定した場合、特定の Web ページで別のドキュメント互換モードを指定することにより、既定のモード設定をオーバーライドできます。Web ページで指定されたモードが、サーバーで指定されたモードよりも優先されます。

スクリプトを使用してドキュメント互換モードを確認する

Windows Internet Explorer 8 を使用して Web ページのドキュメント互換モードを確認するには、document オブジェクトの documentMode プロパティを使用します。たとえば、Windows Internet Explorer 8 のアドレスバーに次のように入力すると、現在の Web ページのドキュメントモードが表示されます。

javascript:alert(document.documentMode);

documentMode プロパティは、ページのドキュメント互換モードに対応した数値を返します。たとえば、ページで IE8 モードをサポートするよう選択されている場合、documentMode は値 8 を返します。

注 : Windows Internet Explorer 6 で導入された compatMode プロパティは、Windows Internet Explorer 8 で導入された documentMode プロパティへの置き換えにより廃止されています。現在 compatMode を利用しているアプリケーションは Windows Internet Explorer 8 でも引き続き動作しますが、documentMode を使用するように更新することをお勧めします。

JavaScript を使用してドキュメントの互換モードを確認する場合は、次の例に示すように、古いバージョンの Windows Internet Explorer をサポートするコードを含めます。

engine = null;
if (window.navigator.appName == "Microsoft Internet Explorer")
{
   // これは IE ブラウザです。エンジンはどのモードで動作しますか?
   if (document.documentMode) // IE8
      engine = document.documentMode;
   else // IE 5-7
   {
      engine = 5; // 他のモードと確認されなければ Quirk モードを仮定
      if (document.compatMode)
      {
         if (document.compatMode == "CSS1Compat")
            engine = 7; // 標準モード
      }
   }
   // この時点で engine 変数にはドキュメント互換モードが格納されています。
}

ここで使用されている document オブジェクトは、特定のブラウザウィンドウ内の HTML ドキュメントを表しており、HTML ドキュメントのコンテンツを検査、変更、追加したり、ドキュメント内のイベントを処理したりするのに使用できます。

条件付きコメントを使用してドキュメント互換モードを確認する

Windows Internet Explorer だけを対象とする場合、次のコード例は、条件付きコメントを使用して現在のバージョンまたはレガシバージョンを指定する方法を示しています。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN">
<html>
   <head>
      <title>テスト ページ</title>
      <meta http-equiv="X-UA-Compatible" content="IE=8"/>
      <!--[if gte IE 8]>
      <style type="text/css">
      body {
       color: #0000ff;
       background-color: #000000;
      }
      </style>
      <![endif]-->
      <!--[if lt IE 8]>
      <style type="text/css">
      body {
       color: #000000;
       background-color: #ffffff;
      }
      </style>
      <![endif]-->
   </head>
   <body>
      <h1>
      <!--[if gte IE 8]>
      第 1 章
      <![endif]-->
      最初の章
      </h1>
      <h1>
      <!--[if gte IE 8]>
      第 2 章
      <![endif]-->
      2 番目の章
      </h1>
      すべてのバージョンで表示可能なテキスト。
   </body>
</html>

バージョン管理および Windows Internet Explorer の各モードの詳細については、「ドキュメント互換性の定義」を参照してください。