HTML と CSS のサポート

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

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

Windows Internet Explorer 8 は、これまでで最も忠実に標準に準拠したバージョンであり、Cascading Style Sheets (CSS) Level 2.1 の完全なサポート、CSS 3 のサポート強化、HTML 4.01 のサポート向上、および HTML 5 の強力なサポートを実現しています。これらの HTML 要素のサポート向上により、Web 開発者は、これまで以上に表現力豊かでアクセスしやすい HTML マークアップを作成できるようになります。このドキュメントでは、HTML と CSS のサポートに関する Windows Internet Explorer 8 の動作の変更点、およびそれらの変更が Web 開発者に与える影響について説明します。

HTML のサポート

HTML 4.01で提供される要素を開発者が最大限活用できるように、また、Web 開発者によって意図されたセマンティクスがより適切に再現されるように、Windows Internet Explorer では、次のプレゼンテーション要素のサポートがアップグレードされました。

P 要素 : 論理的な段落を表します。

OBJECT 要素 : イメージなどのオブジェクトを表すことができます。

P 要素を自動的に閉じる

閉じられていない P 要素は、その後に TABLE、FORM、NOFRAMES、または NOSCRIPT要素が続くと自動的に閉じられるようになりました。

<html>
   <head>
      <title>P 要素を閉じる単純な例</title>
      <meta http-equiv="X-UA-Compatible" content="IE8"/>
   </head>
   <body>
      <p>これは最初の段落です</p>
      <p style="margin-left:30px">これは別の段落です。<!-- P が閉じていない -->
      <table border="1px" cellpadding="2px">
         <tr><td>これは表のセルです。</td></tr>
      </table>

      <p>これは 3 番目の段落です。</p>
   </body>
</html>

この例では、2 番目の P 要素が閉じられていません。Windows Internet Explorer 7 で表示すると、TABLE 要素は 2 番目の P 要素の子要素として表示されます。2 番目の P 要素は、ウィンドウの左余白から 30 ピクセル分インデントされます。TABLE は P 要素の子要素であるため、TABLE 要素もウィンドウの左余白からインデントされます。一方、Windows Internet Explorer 8 の既定のモードで表示した場合、TABLE 要素は左余白に揃えられます。Windows Internet Explorer 8 では、TABLE 要素を表示する前に、閉じられていない P 要素を自動的に閉じるため、TABLE 要素はその P 要素の子要素となります。

OBJECT 要素を使用してイメージを表示する

Windows Internet Explorer 8 では、OBJECT 要素を使用してイメージを表示できるようになりました。古いバージョンのブラウザでは、この要素を使用してイメージを表示するとイメージにスクロールバーと境界線が自動的に表示されたため、イメージの表示が不適切になることが多くありました。

Windows Internet Explorer 8 では、OBJECT 要素を使用してイメージを表示すると、IMG 要素を使用して埋め込んだ場合と同じように表示されます。Web ページでこの動作を使用するには、OBJECT 要素の DATA 属性をイメージの URL に設定します。また、DATA 属性に dataURL を埋め込むこともできます。詳細については、「データバインド」を参照してください。

Windows Internet Explorer で、古いバージョンの動作を使用してイメージを OBJECT 要素に読み込む場合には、Web ページに対して古い互換モードを適用するか、または OBJECT 要素の TYPE 属性を text/html に設定します。

オブジェクトフォールバックの強化

OBJECT 要素でリソースの読み込みに失敗した場合、OBJECT 要素の内部のコンテンツが代わりにレンダリングされます。これはオブジェクトフォールバックと呼ばれ、何らかの不具合が発生したときに Windows Internet Explorer で使用される代替手段を定義できます。

Windows Internet Explorer 7 では、OBJECT 要素を入れ子にする機能がサポートされていました。それにより、複数の OBJECT 要素を使用して、次の例に示すような高度なフォールバック手段を実現できました。

<object data="..." type="silverlight" >
   <object data="..." type="windows media file">
      <object data="..." type="image/png">
          すべて失敗しました。申し訳ありません。
      </object>
   </object>
<object>

この例では、3 つの OBJECT 要素を使用してオブジェクトフォールバックを定義しています。最初に、Silverlight アプリケーションの読み込みを試みます。失敗した場合は、Microsoft Windows Media ファイルが要求されます。Windows Media ファイルを読み込むことができない場合は、イメージを読み込みます。

Windows Internet Explorer 7 を使用してこの例を表示すると、イメージが表示されますが、このページのドキュメントオブジェクトモデル (DOM) には OBJECT 要素が 1 つしかありません。これは、Windows Internet Explorer 7 では、読み込みに失敗したオブジェクトに対して OBJECT 要素が作成されないためです。

Windows Internet Explorer 8 を使用してこの例を表示すると、3 つの OBJECT 要素を含むイメージがページの DOM に表示されます。読み込みに失敗しているため、最初の 2 つの OBJECT 要素は非アクティブです。ただし、JavaScript を使用してそれらを検索することはできます。

注 : ページの表示を更新するか、または JavaScript を使用して新しいオブジェクトを読み込まない限り、非アクティブのオブジェクトを再度アクティブにはできません。

Windows Internet Explorer 8 では、この新しいフォールバック動作を通信関連のエラーに対してのみ使用します。つまり、読み込み要求によってクライアント (4xx) またはサーバー (5xx) の HTTP エラー応答が返された場合にだけ、フォールバックが実行されます。不適切な形式のコンテンツや破損した ActiveX コントロールなど、他の理由で要求が失敗した場合には、従来のフォールバック動作が行われます。HTTP 応答コードに関する詳細については、「HTTP 応答ヘッダー」を参照してください。

HTML 5/AJAX の機能拡張

Windows Internet Explorer 8 での HTML 5 の機能拡張には、AJAX ナビゲーション、DOM ストレージ、ドキュメント間メッセージング (XDM)、および接続イベントが含まれます。これらの機能は、W3C HTML 5.0 草稿との密接な調整の上で開発されました。詳細については、「AJAX - AJAX ナビゲーションの概要」、「DOM ストレージの概要」、「AJAX - Internet Explorer 8 の XMLHttpRequest 機能拡張」、および「AJAX - Internet Explorer 8 の接続機能拡張」を参照してください。

AJAX ナビゲーション

AJAX を使用する大きな利点の 1 つは、従来のようなページナビゲーションを行わずにページのコンテンツを更新できることです。その際、ページの状態を保存できず、ページのコンポーネントにそれを警告できないことは、状況によって問題となる場合があります。なぜなら、アドレスバーや [戻る] ボタン、[進む] ボタンのようなコンポーネントは、ページナビゲーションの後でのみ更新されるからです。その結果、ブラウザでは AJAX コンテンツの変更が travelog 上に保存されず、アドレスバーなどのコンポーネントが更新されません。このとき、ブラウザが古いコンテンツを読み込めないように見え、エンドユーザーの混乱を招く可能性があります。IE8 モードでは、Windows Internet Explorer が window.location.hashの更新をナビゲーションのように扱い、前のドキュメント URL を保存します。

DOM ストレージ

現在、Web ページは、document.cookieプロパティを使用してローカルコンピュータにデータを格納します。サイトではドメインごとに 50 個のキー/値ペアしか格納できないため、Cookie の能力は限定されています。また、Cookie のプログラミングモデルは煩雑であり、データのために Cookie 文字列全体を解析する必要があります。W3C の HTML 5 DOM ストレージオブジェクトは、キー/値ペアの文字列データに対して、ずっと単純なグローバルおよびセッションのストレージモデルを提供します。サイトでは、タブが存在している間、または Web サイトやユーザーがデータをクリアするまでの間、データを保存しておくことができます。

各ドメインは、そのサブドメインを含めて、10 MB のローカルストレージ空間を持っています。これにより、クロスドメイン攻撃を受ける可能性を低減できます。同様に、各ブラウザタブに独自のセッションストアがあります。DOM ストレージは、単に Web アプリケーションがデータを格納するだけのメカニズムであり、データベースを保持しているわけではありません。たとえば、値による検索などの複雑なクエリを実行する方法はありません。

(XDM)ドキュメント間メッセージング

ブラウザのサイト生成元ポリシーにより、Web ページは他のドメインからデータを取得しないようブロックされます。そのため、よりリッチな体験を提供する方法として、1 つの Web ページ上の異なるドメインを互いに通信させることはできません。Web サイトでは、入れ子になった IFrame を作成し、URL を通じて送信されたデータを取得することにより、このポリシーを回避しています。Web サイトがこのポリシーを回避するためのもう 1 つの方法は、スクリプトおよび他のリソースファイルを他のドメインから直接ホストすることです。この第 2 の回避方法では、一方向の通信だけが可能です。また、埋め込まれたスクリプトやリソースはホスト Web サイトと同じ権限で動作し、Cookie に格納されたものも含めたユーザーのデータにアクセスするため、セキュリティ上のリスクもあります。

XDM では、ウィンドウオブジェクトの postMessage メソッドを提供し、相互の了解があれば異なるドメインがそれぞれ他のドメインと通信できるようにしています。XDM は、双方向のドメイン間通信のために、上記の回避方法よりもずっと単純でパフォーマンスも考慮したメカニズムを備えています。

接続イベント

Windows Internet Explorer 8 では、window.navigator.onLineプロパティおよび online/offline イベントを使用して、ブラウザが現在オンラインであるかオフラインであるかを Web ページで検出できます。この情報により、DOM ストレージオブジェクトを使用したリッチなオフラインシナリオを実現できます。たとえば、ユーザーが自分の Live Mail ページにログオンした後で接続が失われた場合、引き続きメールを編集できるように、DOM ストアに下書きを保存するよう求めるメッセージを必ず表示することができます。接続が回復したら、スクリプトによって電子メールを取得し、サーバーに送信できます。

詳細については、「AJAX - Internet Explorer 8 の接続機能拡張」を参照してください。

CSS のサポート

CSS 標準のサポートは、Windows Internet Explorer の新しいバージョンごとに着実に向上を重ね、今回 CSS 2.1 の完全なサポートを実現しました。以下に示す表では、Windows Internet Explorer 7 と比較して Windows Internet Explorer 8 で改良された各種の CSS プロパティが一目でわかるようになっています。これらの表は、Windows Internet Explorer 8 でサポートされている CSS プロパティの完全な一覧ではありません。示されているのは、Windows Internet Explorer 7 でサポートされていないか部分的にのみサポートされていて、現在 Windows Internet Explorer 8 でサポートされている CSS プロパティです。Windows Internet Explorer の CSS 互換性の詳細、およびより完全な CSS 要素サポート表については、「CSS の互換性と Internet Explorer」を参照してください。

表中の "部分的" は、そのバージョンの Windows Internet Explorer で機能が部分的にのみサポートされていることを示します。詳細については、リンクをクリックして、MSDN サイトの各機能の参照ページをご覧ください。

擬似クラス

CSS 2.1		IE 7.0	IE 8.0
:active { sRules }	:active	部分的	○
:after { sRules }	:after	×	○
:before { sRules }	:before	×	○
:focus { sRules }	:focus	×	○
:lang(C) { sRules }	:lang()	×	○

色および背景

CSS 2.1		IE 7.0	IE 8.0
{ background-position : sPosition }	background-position	部分的	○

フォントおよびテキスト

CSS 2.1		IE 7.0	IE 8.0
{ font-weight : sWeight }	font-weight	部分的	○
{ white-space : sWrap }	white-space	部分的	○
{ word-spacing : sSpacing }	word-spacing	部分的	○

生成されるコンテンツ

CSS 2.1		IE 7.0	IE 8.0
{ content : sContent }	content	×	○
{ counter-increment : sCounter }	counter-increment	×	○
{ counter-reset : sCounter }	counter-reset	×	○
{ quotes : sQuotes }	quotes	×	○

境界線およびレイアウト

CSS 2.1		IE 7.0	IE 8.0
{ border-collapse : sCollapse }	border-collapse	部分的	○
{ border-spacing : sSpacing }	border-spacing	×	○
{ border-style : sStyle }	border-style	部分的	○
{ caption-side : sLocation }	caption-side	×	○
{ empty-cells : sEmptyCells }	empty-cells	部分的	○

位置揃え

CSS 2.1		IE 7.0	IE 8.0
{ bottom : sBottom }	bottom	部分的	○
{ display : sDisplay }	display	部分的	○
{ left : sPosition }	left	部分的	○
{ right : sPosition }	right	部分的	○
{ top : sTop }	top	部分的	○
{ z-index : vOrder }	z-index	部分的	○

印刷

CSS 2.1		IE 7.0	IE 8.0
{ orphans : nLines }	orphans	×	○
{ page-break-inside : sBreak }	page-break-inside	×	○
{ widows : nLines }	widows	×	○

ユーザーインターフェイス

CSS 2.1		IE 7.0	IE 8.0
{ outline : sOutline }	outline	×	○
{ outline-color : sColor }	outline-color	×	○
{ outline-style : sStyle }	outline-style	×	○
{ outline-width : sWidth }	outline-width	×	○
CSS 3		IE 7.0	IE 8.0
{ box-sizing : sSizing }	box-sizing	×	○

関数

CSS 2.1	IE 7.0	IE 8.0
counter()	×	○
attr()	×	○

キーワード

CSS 2.1	IE 7.0	IE 8.0
Inherit	×	○

Windows Internet Explorer の CSS 互換性の詳細、およびより完全なサポート表については、「CSS の互換性と Internet Explorer」を参照してください。

次の方法で共有