Internet Explorer 8 における CSS の改良点

  • [アーティクル]

Windows Internet Explorer 8 の新機能

Internet Explorer 8 は、カスケード スタイル シート (CSS) レベル 2 リビジョン 1 (CSS2.1) の仕様に完全準拠し、CSS レベル 3 (CSS3) の一部の機能をサポートします。 このトピックは、Internet Explorer 8 における CSS サポートの変更点一覧を示します。Internet Explorer の最近のバージョンでの CSS 準拠状況については、「CSS に関する互換性と Internet Explorer」を参照してください。

  • 互換性について
  • @ ルール
  • 擬似クラスと擬似要素
  • リスト
  • 色および背景
  • フォントおよびテキスト
  • 生成されるコンテンツ
  • 境界線およびレイアウト
    • フロート
    • マージンの相殺
  • 位置揃え
  • 印刷
  • ユーザー インターフェイス
  • Internet Explorer 固有の機能
    • CSS 式
    • CSS の拡張
  • データ URI
  • 関連トピック

互換性について

このトピックで説明する Internet Explorer 8 における CSS 準拠の変更点は、ページが IE8 モード (または Internet Explorer 8!DOCTYPE ディレクティブを使用する Emulate IE8 モード) の場合にのみ機能します。 ドキュメント互換モードの詳細については、「ドキュメント互換性の定義」 (英語の可能性あり) を参照してください。

@ ルール

@page ルールが、:first、:left、および :right セレクターで期待どおりに動作するようになりました。

擬似クラスと擬似要素

Internet Explorer 8 では、次の擬似クラスと擬似要素のサポートが導入されます。

  • :before および :after  — 新しくサポートされる content プロパティと併用すると、これらの擬似クラスを使用して、ドキュメント内の要素の前後に表示されるよう動的 ("生成される") コンテンツを記述できます。
  • :focus  — この擬似クラスは、要素に入力フォーカスがあるときに適用されます。
  • :lang(C)  — この擬似クラスは、特定の言語の要素を選択します。

また、:active 擬似クラスの動作も完全な CSS 2.1 準拠になりました。現在、この擬似クラスは a 要素だけでなく、すべての要素に適用されます。

リスト

list-style-type 属性に値が追加され、この属性は完全な CSS 2.1 準拠になりました。

色および背景

background-position 属性の動作が完全な CSS 2.1 準拠になりました。

フォントおよびテキスト

次のテキスト属性の動作が完全な CSS 2.1 準拠になりました。

また、text-decoration 属性の上線の動作が CSS 2.1 仕様にさらに厳密に準拠するようになりました。

生成されるコンテンツ

Internet Explorer 8 では、次の属性を含む生成されるコンテンツの完全サポートが導入されます。

content プロパティと併用すると、新しくサポートされる :before および :after 擬似クラスを使用して、ドキュメント内の要素の前後に表示されるよう動的 ("生成される") コンテンツを記述できます。

境界線およびレイアウト

Internet Explorer 8 では、次の機能のサポートが導入されます。

次の属性の動作が完全な CSS 2.1 準拠になりました。

フロート

float の動作に多くの変更が加えられ、hasLayout プロパティの要件により発生していた問題など、Internet Explorer の以前のバージョンで発生していた最も厄介なフロートの問題の多くが解決しました。 Internet Explorer 8 では、hasLayout 機能は削除されました。解決した問題のいくつかを次に挙げます。

  • 要素をクリアしても、入れ子になったその他のフロートが親を共有しない場合、そのフロートはクリアされない。
  • フロートの後の要素をクリアすると上スペースが 2 倍になる。

マージンの相殺

マージンの相殺動作に多くの変更が加えられ、Internet Explorer の以前のバージョンで発生していた最も厄介な相殺の問題の多くが解決し、マージンの相殺動作が CSS 2.1 仕様に準拠するようになりました。

位置揃え

次の配置属性の動作が完全な CSS 2.1 準拠になりました。

display 属性では、W3C カスケード スタイル シート レベル 2.1 仕様 World Wide Web リンクのすべての表レイアウト値がサポートされるようになりました。 長年の間、テーブルはインターネット上で好まれるレイアウト メカニズムでした。 Internet Explorer 8 では、display 属性を使用して、テーブル形式の書式設定をテーブル以外の要素に適用できるようになりました。 実際には、CSS テーブルは HTML マークアップよりも許容性があります。HTML で作成されたテーブルは、コンテナーを閉じて予期しないネストを回避しますが、CSS ルールで作成されたテーブルは要素をネストして有効になります。

display 属性では、CSS3 Ruby モジュール World Wide Web リンクの ruby 形式もサポートされます。

印刷

Internet Explorer 8 では、次の印刷属性のサポートが導入されます。

CSS 印刷機能の詳細については、「CSS の方法 - CSS を使用する印刷に合わせてページを調整する」 (英語の可能性あり) を参照してください。

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

Internet Explorer 8 では、outline 属性のサポートが導入されます。この属性を使用すると、サイズを変えずに要素を強調表示できます。 次の属性に対して完全な CSS 2.1 準拠がサポートされます。

また、Internet Explorer 8 では、box-sizing 属性のサポートも導入されます。

Internet Explorer 固有の機能

このセクションでは、CSS 2.1 仕様で定義されていない動作について説明します。

CSS 式

Internet Explorer 8 では、標準準拠とパフォーマンスの理由で、IE8 モード (または Internet Explorer 8 !DOCTYPE ディレクティブを使用する EmulateIE8 モード) での "CSS 式"、つまり動的プロパティのサポートが終了しました。 ただし、IE7 モード、EmulateIE7 モード、IE5 モードのページでは、それらは Internet Explorer 8 でも期待どおりに機能します。 ドキュメント互換モードの詳細については、「ドキュメント互換性の定義」 (英語の可能性あり) を参照してください。

CSS の拡張

次の CSS 属性は、CSS 2.1 仕様に対する Microsoft の拡張であり、IE8 モードでは -ms- プレフィックスを付けて指定する必要があります。

データ URI

データ URI (Uniform Resource Identifier) により、Web ページの作成者は、URI を使用してエンティティを取得する場所を識別するのではなく、URI 内に小さなエンティティを直接埋め込むことができます。 これは主に CSS またはレイアウト内で使用される小さいイメージ (箇条書きの記号など) が対象になります。 詳細については、「data プロトコル」 (英語の可能性あり) を参照してください。

関連トピック