Skip to main content
Internet Explorer 9 開発者ガイド

Internet Explorer 9 開発者ガイド

#
#
#
#
#


更新日: 2011 年 5 月 27 日

Internet Explorer 9 開発者ガイドでは、Internet Explorer 9 における機能と改善点を概説します。Web 開発者やデザイナーは、本ガイドを参考にすることで、これらの機能強化を最大限に活用できます。開発者は、 Internet Explorer Test Drive で実際に動作するプラットフォームを体験することもできます。

目次

概要

全体的なブラウザー パフォーマンス

同じマークアップを実現する Web 標準規格サポート

Windows PC の性能を活かした新しいグラフィック機能

新機能の一覧

標準規格サポートによる相互運用性の強化

CSS3

CSS3 2D Transforms

CSS3 背景と境界モジュール

CSS3 カラー モジュール

CSS3 フォント モジュール

CSS3 メディア クエリ モジュール

CSS3 名前空間モジュール

CSS3 値と単位モジュール

CSS3 セレクター

その他の CSS 機能

CSSOM 表示モジュール

データ URI

DOM (Document Object Model) の改善点

強化された DOM の概要

XML から DOM への解析、および DOM から XML へのシリアル化

DOM (Document Object Model) レベル 2 と 3

DOM Core (L2 と L3) および Views (L2)

DOM Element Traversal

DOM L2 と L3 Events

DOM L2 HTML

DOM L2 Style

DOM L2 Traversal と Range

DOM 空白文字の処理

ECMAScript 5

HTML5

HTML5 の Geolocation

HTML5 video と audio 要素

HTML5 canvas 要素

HTML 解析の改善点

HTML5 選択 API

HTML5 セマンティック要素

ICC カラー プロファイル

セレクター API レベル 2

SVG (Scalable Vector Graphics)

基本図形

クリッピング、マスク、および合成

座標系、変換、および単位

ドキュメント構造

グラデーションおよびパターン

相互作用性

リンクと表示

ペイントとカラー

パス

テキスト

Web 開発者向き新ツール

ピン留めサイト

プラットフォーム バージョニング

新しいドキュメント モード

ユーザー エージェント (UA) 文字列

開発者ツール

[コンソール] タブ

[ネットワーク] タブ

ユーザーエージェント スイッチャー ツール

実際のパフォーマンスの測定

改訂履歴

概要

Windows Internet Explorer 9 へようこそ。開発者の皆様は、自分やユーザーが使用しているブラウザーに関する最新情報を把握しておきたいと思われるはずです。Internet Explorer 9 は世界で最も人気のある Web ブラウザーの最新バージョンです。Internet Explorer 9 の開発では、次世代の Web を実現するためのプラットフォーム、ツール、機能を提供することで、Web 開発コミュニティがリッチかつ相互運用可能な標準準拠 Web アプリケーションを作成できるようになることを念頭に置きました。

このドキュメントでは、Internet Explorer を使用する顧客を抱える Web 開発者向けに、WEb サイトや Web アプリケーションでこれらの強化された新しい機能を利用する方法について説明します。これらの機能が実際に動作するデモについては、関連する「 Test Drive サイト」を参照してください。フィードバックを送信される場合や、Internet Explorer 9 の詳細な情報を参照される場合は、「 リリース ノート」および MSDN の「 Internet Explorer 9 の新機能」を参照してください。Internet Explorer 9 の最新情報については、「 Internet Explorer チーム ブログ」を参照してください。Internet Explorer に関する最新の開発者向け情報については、「 Internet Explorer デベロッパー センター」(MSDN) を参照してください。

Internet Explorer 9 は、Internet Explorer 9 がプラットフォームの次の点においてどれだけ進化しているかを、開発者の皆様に理解していただくことを目的としています。

  • 全体的なブラウザー パフォーマンス
  • 異なるブラウザー間で同じマークアップが同じように機能するための Web 標準規格のサポート
  • Windows PC のパワーを利用する新しいグラフィック機能

全体的なブラウザー パフォーマンス

ブラウザー パフォーマンスは、ブラウザー内の数多くのサブシステムに関係します。サイトが異なったり、同じサイト内でもアクティビティが異なれば、ブラウザーへの負荷と要求も異なります。たとえば、 Windows Live Mail や Microsoft Office Web Apps などの Web アプリケーションは、 Bing News や Digg などのニュース集約サイトとはまったく異なる方法でブラウザーのサブシステムを使用します。

新しい JavaScript エンジン “Chakra” の紹介

スクリプト エンジンのパフォーマンスは、全体的なブラウザー パフォーマンスに影響を与えます。Internet Explorer 8 のスクリプト パフォーマンスは Internet Explorer 7 と比較して目覚ましく改善されましたが、Internet Explorer 9 の新しい JavaScript エンジンである “Chakra” でも、さらに同じ規模で改善が行われています。Chakra エンジンは、可能である場合には、コードの解釈、コンパイル、および実行を並列で行い、複数 CPU コアを十二分に活用します。詳細については、「 Internet Explorer チーム ブログ」の「 Internet Explorer 9 の新しい JavaScript エンジン」を参照してください。

もちろん Internet Explorer チームは、実際のサイトが使用する場合のブラウザー サブシステムのあらゆるパフォーマンス特性を調べています。最終目標は、ベンチマーク上ではなく、実際のサイトで全体的に優れたパフォーマンスを発揮することにあります。

同じマークアップを実現する Web 標準規格サポート

Internet Explorer は、Web 開発者にリッチかつ相互運用可能な機能を提供します。Web サイトを書き直したり、何度もテストをやり直すのは避けたいものです。私たちは、ブラウザー ベンダーが標準規格を採用することが、その目標を実現するための最良の方法だと考えています。

Internet Explorer 8 では、Internet Explorer チームは相互運用性が高い CSS 2.1 を実装するだけでなく、7200 件を超えるテストから構成されるテスト スイートを World Wide Web Consortium (W3C) に提供しました。これは重要なことです。検証テストがなければ、標準規格を首尾一貫して実現することはさらに困難となり、サイト開発者は標準規格を信頼できなくなります。

Internet Explorer 9 は、標準規格のサポートと相互運用性に重点を置いています。たとえば、新しい HTML5 のサポート、多数の CSS3 機能向けの改善されたサポート、そして Internet Explorer では初となる SVG のビルトイン サポートなどが、Internet Explorer 9 に採用されています。

Windows ベースの PC のパワーを利用する新しいグラフィック機能

Windows エコシステムが、目覚ましいハードウェア革新をもたらします。Internet Explorer 9 を利用することで、Web 開発者はこのハードウェア革新を十二分に活用することができ、ハードウェア駆動によるグラフィックとテキストのレンダリングを利用できます。

Internet Explorer 9 では、Web 開発者が高度な機能を実現できるよう、DirectX ファミリーの Windows アプリケーション プログラミング インターフェイス (API) を使用します。Direct2D と DirectWrite を使用することで、すべてのグラフィックとテキストのレンダリング機能を、CPU からグラフィック カードに移動しました。グラフィック ハードウェアによるアクセラレーションにより、CPU が非力な場合でも、グラフィックを多用するリッチなサイトを Windows 上で高速にレンダリングできます。さらに、慣れ親しんだ同じ標準規格でサイトを作成するだけで、これらの変更点によるメリットが得られます。

新機能の一覧

この一覧には、Internet Explorer 9 の新しい開発者向け機能がすべて記載されています。Internet Explorer 9 のプレリリース ビルドからの変更点の詳細については、「改訂履歴」を参照してください。

  • 強化されたCSS3 サポート
    • border-radius プロパティによる丸みが付けられたコーナー
    • CSS3 背景と境界機能
    • opacity プロパティ
    • RGBA、HSL、および HSLA カラー モデル
    • CSS3 フォント プロパティ、および新しい Web フォント形式
    • CSS3 メディア クエリ
    • CSS3 名前空間
    • CSS3 値と単位
    • CSS3 セレクター
  • データ URI サポートの強化
  • DOM (Document Object Model) の改善点
    • 強化された DOM 機能
    • XML から DOM への解析、および DOM から XML へのシリアル化
    • 新しい DOM レベル 2 (L2) とレベル 3 (L3) のサポート、および更新された動作
      • DOM Core (L2、L3) および Views (L2)
      • DOM Element Traversal
      • DOM Events (L2、L3)
      • DOM L2 HTML
      • DOM L2 Style
      • DOM L2 Traversal と Range
    • 新しい空白処理の動作
  • ECMAScript 機能の機能強化
  • 追加された HTML5 サポート
    • Geolocation
    • video と audio 要素
    • canvas 要素
    • Selection インターフェイス
    • 改善された HTML 要素の解析
    • テキスト選択 API
  • 画像上での ICC v2 と v4 カラー プロファイルのサポート
  • msMatchesSelector メソッドでの新しいセレクター API レベル2 サポート
  • SVG 機能
    • 基本図形 :長方形、円、楕円、直線、ポリライン、および多角形
    • クリッピング、マスク、および合成
    • 座標系、変換、および単位
    • ドキュメント構造、メタデータ、および拡張性機能
    • グラデーションおよびパターン
    • 相互作用性
    • リンクと表示
    • ペイントとカラー
    • path 要素と d 属性のフル機能を含むパス
    • テキスト
  • その他のプラットフォーム バージョニング機能
    • ピン留めサイト
    • 新しいドキュメント モード
    • 新しいユーザー エージェント (UA) 文字列
  • 開発者ツールの追加
    • パフォーマンスの改善
    • [コンソール] タブ
    • [ネットワーク] タブ
    • UA スイッチャー ツール
    • 実際のパフォーマンスの測定

標準規格サポートによる相互運用性の強化

重要   Internet Explorer 9 での新しい標準規格のサポートでは、ブラウザーを Internet Explorer 9 標準モード (“IE9 モード”) に設定する必要があります。これを行うための最適な方法は、標準の !DOCTYPE ディレクティブを使用し、X-UA-Compatible meta タグまたは HTTP ヘッダーを使用しないことです。IE9 モードに設定するための !DOCTYPE は次のとおりです。

<!DOCTYPE html>

もちろん、!DOCTYPE および X-UA-Compatible meta タグまたは HTTP ヘッダーを使用して、既定値を好きなように変更することもできます。

現在のドキュメント モードを判断するには、F12 を押して Internet Explorer 開発者ツールを開いて、メニュー バーの右側を確認します。ドキュメント モードを上書きするには、[ドキュメント モード] メニューで、[Internet Explorer 9 標準] をクリックします。

Internet Explorer 9 でのドキュメント モードの動作に関する最新情報については、「プラットフォーム バージョニング」を参照してください。

CSS3

Internet Explorer 9 は、これまでの Microsoft 製ブラウザーと比較して、Cascading Style Sheets (CSS) のサポートが強化されています。Internet Explorer 8 は CSS2.1 仕様に完全に準拠しましたが、標準に対する取り組みはその後も続けられ、Internet Explorer 9 では CSS3 の多くのコンポーネントのサポートが追加されています。

注意  多くの CSS3 モジュールが、まだ作業草案または最終草案段階であることをご理解ください。勧告候補 (Candidate Recommendation) 段階に至るまでは、大幅に変更される場合があります。詳細については、「 最新 CSS3 草案モジュール」を参照してください。

CSS3 2D Transforms

Internet Explorer 9 では、 CSS3 2D Transforms のサポートが追加されています。CSS 2D Transforms により、CSS がレンダリングする要素を 2 次元空間で変換できます。

Internet Explorer 9 では、以下の 2D Transforms プロパティがサポートされます。

  • -ms-transform プロパティは、要素に 1 つ以上の 2 次元変換関数を適用します。
  • -ms-transform-origin プロパティは、要素の変換の原点を決定します。このプロパティは、既定の原点 (中心) を変更する場合に便利です。

注   CSS 2D Transforms モジュールは W3C による勧告候補 (Candidate Recommendation) となっていないため、Internet Explorer 9 で transform と transform-origin の両プロパティを認識できるようにするには、-ms- プレフィックスを使用する必要があります。詳細については、Internet Explorer チーム ブログの「 IE9、ベンダー プレフィックス、および開発者」を参照してください。

Internet Explorer 9 では、-ms-transform プロパティで使用できる変換関数として、以下の関数がサポートされています。

  • matrix(a,b,c,d,e,f) 関数は、6 個の値 (a ～ f) の変換行列で表される 2D Transforms を表します。
  • translate(tx,[ty]) 関数は、ベクトル [tx,ty] で表される 2D 平行移動を表します。tx は第 1 の平行移動値パラメーターであり、ty は第 2 の平行移動値パラメーターです。ty が指定されていない場合、その値は 0 です(平行移動値パラメーターは、パーセントまたは長さのいずれかです)。
  • translateX(tx) 関数は、x 軸方向の指定された量の平行移動を表します。
  • translateY(ty) 関数は、y 軸方向の指定された量の平行移動を表します。
  • scale(sx,[sy]) 関数は、2 つのパラメーターで記述される倍率ベクトル [sx,sy] による 2D 拡大縮小演算を表します。第 2 パラメーターが与えられない場合、第 1 パラメーターと同じ値を取ります。
  • scaleX(sx) 関数は、倍率ベクトル [sx, 1] による拡大縮小演算を表します。sx はパラメーターとして与えられます。
  • scaleY(sy) 関数は、倍率ベクトル [1, sy] による拡大縮小演算を表します。sy はパラメーターとして与えられます。
  • rotate(angle) 関数は、要素の原点を中心とした、パラメーターで指定された角度の 2D 回転を表します。原点は transform-origin プロパティで定義されます。
  • skewX(ax) 関数は、x 軸に沿った、指定された角度の傾斜変換を表します。
  • skewY(ay) 関数は、y 軸に沿った、指定された角度の傾斜変換を表します。
  • skew(ax,[ay]) 関数は、x 軸および y 軸に沿った傾斜変換を表します。第 1 角度パラメーターは、x 軸の傾斜を指定します。第 2 角度パラメーターは、y 軸の傾斜を指定します。第 2 パラメーターが与えられない場合、y 角度には値 0 が使用されます (つまり、y 軸の傾斜はありません)。

-ms-transform-origin プロパティには、1 つまたは 2 つの値を指定できます。各値は、キーワード、長さ、パーセントのいずれかです。-ms-transform-origin プロパティが設定されていない場合、変換は中心から行われます (これは、-ms-transform-origin の値が 50% 50% の場合に相当します)。

  • 第 1 の値は、水平位置 (x 軸に沿った位置) を示し、負の値にすることもできます。この値は、長さの値 (単位は サポートされる長さの単位のいずれか)、パーセント (ボックス全体の長さに対する割合)、またはleft (0% または長さ 0 に相当)、center (50% またはボックスの半分の長さに相当)、right (100% またはボックス全体の長さに相当) の 3 つのキーワードのいずれかを取ることができます。
  • 第 2 の値は、垂直位置 (y 軸に沿った位置) を示し、負の値にすることもできます。この値は、長さの値 (単位は サポートされる長さの単位のいずれか)、パーセント (ボックス全体の高さに対する割合)、またはtop (0% または高さ 0 に相当)、center (50% またはボックスの半分の高さに相当)、bottom (100% またはボックス全体の高さに相当) の 3 つのキーワードのいずれかを取ることができます。

1 つの値のみが指定されている場合、もう一方の値は既定で center になります。

以下のマークアップを考えます。

div {
     -ms-transform:translate(200px, 100px) scale(.75, .75) rotate(40deg);
     -ms-transform-origin:60% 100%;
}

Internet Explorer 9 では、-ms-transform-origin プロパティを 60% 100% に設定すると、変換の原点は変換される要素の長さの 60%、高さの 100% の位置に設定されます。-ms-transform プロパティにより、まず要素は x 方向に 200 ピクセル、y 方向に 100 ピクセル移動します。次に要素は 75% のサイズに縮小されます。最後に、-ms-transform-origin プロパティで設定された原点を中心に、要素は 40 度時計回りに回転します。

CSS3 2D Transformsの詳細については、「 MSDN」を参照してください。

CSS3 背景と境界モジュール

Internet Explorer 9 では、 CSS3 背景と境界モジュールのいくつかの機能のサポートが追加されています。最も有名な新機能である border-radius プロパティは、最も要望が高かった CSS の境界の機能でもあります。Internet Explorer 9 では、以下の新しいCSS3 プロパティのサポートも導入されています:

Internet Explorer 9 では、以下の既存の CSS 背景と境界プロパティにも機能が追加されています:

  • background-color:CSS3 Color をサポートします。
  • background-image:複数の値と SVG 画像をサポートします。
  • background-repeat:複数の値に加え、space とround 値をサポートします。
  • background-attachment:複数の値に加え、local 値をサポートします。
  • background-position:複数の値をサポートします。
  • background:CSS3 向けに更新されました。
  • border-color:CSS3 Color をサポートします。
border-radius プロパティ

border-radius プロパティを使用して、各楕円の半径を指定し、角ばったコーナーを 4 分の 1 の楕円で実際に「置き換え」ることで、境界のコーナーを丸めることができます。プロパティは、以下の項目から構成されます:

例として、以下のマークアップをご覧ください:

border-radius:100px 66.66px 200px 50px;
border:10px blue double;
padding: 24px;
width:400px;height:125px;

これをテキスト ブロックに適用すると、以下のような効果が得られます。

CSS3 カラー モジュール

Internet Explorer 9 では、CSS3 カラー モジュールのサポートが追加されています。このモジュールには、 RGBA、HSL、HSLA カラー モデル、opacity プロパティ、およびcurrentColor キーワードのサポートが含まれます。Internet Explorer 9 では、transparent キーワードのサポートも拡張されています。

RGBA カラー モデル

RGB カラー モデルが拡張され、alpha チャンネルと透明度を備えるようになりました。RGBA 値の形式は rgba(red,green,blue,alpha) です。red、green、および blue コンポーネントは、RGB カラー モデルのコンポーネントと等しく、整数またはパーセントで表記されます。alpha コンポーネントは、0.0 (完全に透明) ～ 1.0 (完全に不透明) の間の値で表記されます。

たとえば、背景を 50% の透明度の赤色に設定するには、スタイル シートに以下の 2 つの CSS 宣言のいずれかを含めることができます:

background-color:rgba(255,0,0,0.5);
background-color:rgba(100%,0%,0%,0.5);

RGB 値では 16 新表記がサポートされますが、RGBA 値ではサポートされない点に注意してください。

HSL カラー モデル

Internet Explorer 9 では、CSS3 カラー モジュールの色相-彩度-輝度 (HSL) カラー値がサポートされます。HSL カラー モデルでは、“色相” はカラー ホイールの色の角度 (赤色 は 0 または 360 度、緑色は 120 度、青色は 240 度) で定義されます。“彩度” と “輝度” はパーセントで表記されます。たとえば、以下の CSS 宣言は赤色の背景を定義します。

background-color:hsl(0,100%,50%);
HSLA カラー モデル

Internet Explorer 9 では、HSL カラー モデルも alpha チャンネルで拡張されています。RGBA モデルでは、alpha チャンネルは 0.0 ～ 1.0 の間の値として表記されます。たとえば、以下の CSS 宣言は 50% の透明度の赤色の背景を定義します。

background-color:hsla(0,100%,50%,0.5);
opacity プロパティ

Internet Explorer 9 では、CSS3 カラー モジュールの opacity プロパティが追加されます。このプロパティを使用することで、要素レベルで透明度を制御できます。RGBA 値の alpha コンポーネントと同様に、opacity 値は 0.0 (完全に透明) ～ 1.0 (完全に不透明) の間の数値です。opacity プロパティはすべての要素で利用できます。

以下の例に、navy 色の opacity プロパティを 0 から 1 まで 0.2 ずつ増やした様子を示します。

<div class="opacity_sample">
    <div style="background:navy; opacity:0;"></div>
    <div style="background:navy; opacity:0.2;"></div>
    <div style="background:navy; opacity:0.4;"></div>
    <div style="background:navy; opacity:0.6;"></div>
    <div style="background:navy; opacity:0.8;"></div>
    <div style="background:navy; opacity:1;"></div>
 </div>

この例では、25×125 ピクセル div の以下の出力が生成されます。

カラー キーワード

CSS3 カラー モジュールでは、SVG 1.0 向けカラー キーワードと同等の CSS 向け カラー キーワードの一覧があります。Internet Explorer 9 では SVG サポートは新機能ですが、この変更は Internet Explorer 8 で実装されていました。

Internet Explorer 9 では、CSS3 カラー モジュールのcurrentColor キーワードが導入されました。これは、color を受け付ける任意のプロパティの color プロパティの現在の値を示します。color プロパティ自体に設定すると、currentColor は、次のプロパティに等しくなります: color:inherit.

Internet Explorer 9 では、transparent キーワードが border-color と background-color プロパティ以外でも使用できるように拡張されます。このプロパティは、color プロパティを受け付ける任意のプロパティと併用できるようになりました。

CSS3 フォント モジュール

優れた体裁制御は、CSS の各新バージョンで一貫した機能になりました。同時に、相互運用可能な Web フォント形式が存在しないことは、イライラさせられがちです。Internet Explorer 9 では、CSS フォントの既存サポートが拡張され、 CSS3 フォント モジュールに準拠します。さらに、Web Open Font Format (WOFF) と未処理 TrueType フォントのサポートも追加されます。

フォント プロパティ

font-weight プロパティが更新され、Internet Explorer 9 が CSS3 フォント モジュールに指定されているとおりにフォントの重さを計算するようになりました。

font-size プロパティが更新され、各キーワードのスケール ファクターが CSS3 フォント モジュールで定義されているものになりました。また、キーワードと HTML ヘッダー サイズが CSS フォント モジュールに指定されているとおりにマップされるようになりました。

font-stretch プロパティは Internet Explorer 9 に新しく導入され、フォント ファミリーから、通常、縮小、拡大フェイスを選択します。このプロパティは @font-face ルール記述子としても利用できます。

@font-face ルール

@font-face ルールにより、フォントのリンクが可能になります。つまり、スタイル シートで、ブラウザーがダウンロードして使用する特定のフォント ファイルを指定できます。例として、以下のマークアップを考えます。

@font-face {
   font-family:MyFont;
   src:url(http://mysite/fonts/MyFont.ttf)
      format("embedded-opentype");
 }
 p {font-family:MyFont, serif;
 }

この例で @font-face ルールは、src 記述子に指定されている URL にアクセスし、指定されたフォントを含むフォント ファイルをダウンロードするようにブラウザーに指示します。Internet Explorer 8 以前では、上記の例のようにオプションの format 文字列が含まれている場合、src 記述子は誤って無視されていました。Internet Explorer 9 では、src 記述子は予期されるとおりに解析されます。

Internet Explorer 9 では、unicode-range 記述子のサポートも追加されます。これにより、指定されたフォントでサポートされる Unicode 文字の範囲を指定できます。たとえば、以下のコードの例では、基本 ASCII 文字の範囲を指定します。

@font-face {
   font-family:MyFont;
   src:url(http://mysite/fonts/MyFont.ttf);
   unicode-range:U+0-7F;
 }
Web フォントの形式

Microsoft は Internet Explorer 9 の開発において、多数の Web フォントから選択できることを目標にしました。そのために、以下の点に留意しました:

  • Embedded OpenType (EOT) を引き続きサポートすることによる下位互換性の確保。
  • ZIP 圧縮形式を使用して各テーブルを個別に圧縮することで、sfnt ベースのフォント ファイル (TrueType、OpenType、および Open Font Format フォント) を再パッケージする、Web Open Font Format (WOFF) のサポートの追加。
  • インストール可能な (組み込みアクセス許可ビットが設定されていない) 未処理 TrueType フォントのサポートの追加。

Internet Explorer 9 の Web フォントの一例を参照するには、「 Internet Explorer Test Drive」の「 Web フォント」または「 Web フォント (追加例)」のデモを参照してください。

Internet Explorer 9 の CSS3 フォントの詳細については、「 MSDN」を参照してください。

CSS3 メディア クエリ モジュール

CSS3 メディア クエリ モジュールは、Web 開発者がスタイル シートから正確なデバイスの機能の設定を特定するためのメソッドを指定します。たとえば、モバイル機器 (極小型画面、限定されたカラー パレット、低解像度など)、ネットブック (小型画面、フル カラー パレット、高解像度など)、および標準的なコンピューター (大型画面、フル カラー パレット、高解像度など) で閲覧しているユーザーに対し、ページを別々に設計することができます。CSS3 メディア クエリでサポートされるメディア関連プロパティの完全な一覧には、width、height、device-width、device-height、orientation、aspect-ratio、device-aspect-ratio、color、color-index、monochrome、および resolution が含まれます。

以下の宣言が、@media ルールを使用した通常のメディア クエリです。

@media screen and (max-width:400px) {div {border:none;}}

この場合、screen が対象のメディアの種類を指定し、max-width が対象のメディア プロパティです。宣言では、指定されたルール (div 要素での境界なし) が、最大で 400 ピクセルまでの幅のある画面上にページを表示する場合にのみ適用されることを示します。メディア プロパティを一緒に使用することで、さらに対象を絞ったクエリを作成することができます。以下に例を挙げます。

@media screen and (max-width:400px) and (max-height:600px) {…}

この宣言では、メディアが 400 ピクセル以下の幅、かつ 600 ピクセル以下の高さである場合に、指定されたルールが適用されます。

Internet Explorer Test Drive サイトで、実際に動作するアクションを確認してください。

Internet Explorer 9 では、CSS、HTML、XML、および XHTML でのメディア クエリのサポートが導入されています。Internet Explorer 9 でのメディア クエリの詳細については、「 MSDN」を参照してください。

CSS3 名前空間モジュール

Internet Explorer 9 では、 CSS3 名前空間モジュールの大半がサポートされます。CSS 名前空間を使用することで、開発者は CSS ファイルの既定の名前空間を宣言できます。つまり、既定で任意の要素や属性セレクターもその名前空間を使用することになります。

CSS 名前空間を使用することで、開発者は CSS ファイル内で使用できる名前空間のプレフィックスを作成することもできます。Internet Explorer 9 では、さらに SVG 要素を対象とする名前空間を宣言できます。

@namespace @ルール

@namespace @ルールは、XML 名前空間 (とオプションでそのプレフィックス) を宣言し、それを名前空間の名前を表す文字列と関連付けます。たとえば、以下のルールは既定の名前空間を宣言します。

@namespace "http://www.w3.org/1999/xhtml";

明示的な namespace コンポーネントがない名前に既定の名前空間が適用されます。

@namespace ルールがプレフィックスと一緒に宣言されている場合、名前空間で修飾された名前の中にプレフィックスを使用できます。たとえば、名前空間 prfx に以下の名前空間宣言がある場合を考えます。

@namespace prfx "http://prfx.contoso.com";

その後のセレクターでは、prfx プレフィックスによって指定される名前空間内の E 要素に一致します。

prfx|E

以下の例は若干複雑です。

@namespace prfx "http://prfx.contoso.com";
@namespace msft "http://msft.example.com";

 p {background-color:red;}
prfx|p {background-color:blue;}
msft|p {background-color:green;}

この例では、2 つの名前空間プレフィックスが作成されます。まず、任意の名前空間の p 要素が赤色に色付けされます。次に、prfx 名前空間内の任意の p 要素が青色に色付けし直され、msft 名前空間内の p 要素が緑色に色付けし直されます。

以下の例では、SVG 要素のスタイルを指定します。

@namespace svg "http://www.w3.org/2000/svg";
svg|circle {fill:red;}

この例の名前空間と宣言を使用して、SVG で作成されたすべての円を赤色でフィルします。

詳細については、MSDN の @namespace ルールのリファレンス ページを参照してください。

CSS3 値と単位モジュール

Internet Explorer 9 では、「 CSS3 値と単位モジュール」に説明されている新しい多数の値と単位のサポートが追加されています。これらの新しい値と単位の大半が、このドキュメントで説明されているその他の CSS3 機能をサポートするのに必要になります。

Internet Explorer 9 では、以下の新しい値と単位のサポートが追加されています。

  • deg:度 (角度の単位)
  • grad:グラード (角度の単位)
  • rad:ラジアン (角度の単位)
  • turn:回転数 (角度の単位)
  • ms:ミリ秒 (時間の単位)
  • s:秒 (時間の単位)
  • rem:ルート要素のフォント サイズ (相対的長さの単位)
  • vw:ビューポート幅 (相対的長さの単位)
  • vh:ビューポート高さ (相対的長さの単位)
  • vm:ビューポート幅または高さの小さい方の値 (相対的長さの単位)
  • ch:ゼロの幅 (レンダリング フォントでのゼロ文字の幅。相対的長さの単位)

さらに、Internet Explorer 9 では、生成されたコンテンツに使用する attr() 関数が更新されます。この関数は、任意のプロパティに適用可能となり、複数の引数を受け入れるようになりました。

Internet Explorer 9 では、以下の CSS3 関数が新しく導入されています:

  • calc():算術演算子を使用して値を計算します。長さの値が使用できる場合に便利です

CSS 関数の詳細については、MSDN の「 CSS の値と単位のリファレンス」を参照してください。

CSS3 セレクター

Internet Explorer 9 では、「 CSS3 セレクター推奨事項」で指定されている CSS セレクターの構文の追加項目がサポートされます。Internet Explorer 9 で新しく導入されたセレクターをここに一覧します (Internet Explorer でサポートされるセレクターの完全な詳細については、MSDN の「 CSS に関する互換性と Internet Explorer」を参照してください)。

詳細については、MSDN の「 CSS セレクター」を参照してください。

実際に動作する CSS セレクターの例を確認するには、 Internet Explorer Test Drive サイトにアクセスしてください。

構造疑似クラス

構造疑似クラスを使用することで、単純なセレクターやコンビネーターを使用しては選択できない場合に、ドキュメント ツリー内の追加情報を基にして選択を行えます。

以下の例では、ドキュメントのルートである E 要素が選択されます。

E:root 

以下の例では、その親の n 番目の子である E 要素が選択されます。

E:nth-child(n)

以下の例では、その親の最後から数えて n 番目の子である E 要素が選択されます。

E:nth-last-child(n) 

以下の例では、その種類の n 番目の兄弟である E 要素が選択されます。

E:nth-of-type(n) 

以下の例では、その種類の最後から数えて n 番目の兄弟である E 要素が選択されます。

E:nth-last-of-type(n)

以下の例では、その親の最後の子である E 要素が選択されます。

E:last-child 

以下の例では、その種類の最初の兄弟である E 要素が選択されます。

E:first-of-type 

以下の例では、その種類の最後の兄弟である E 要素が選択されます。

E:last-of-type 

以下の例では、その親の唯一の子である E 要素が選択されます。

E:only-child

以下の例では、その種類の唯一の兄弟である E 要素が選択されます。

E:only-of-type

以下の例では、子がない E 要素 (テキスト ノードを含む) が選択されます。

E:empty
target 疑似クラス

target 疑似クラスでは、参照 URI の target 要素が選択されます。フラグメント識別子を使用してページ内での場所を特定します。フラグメント識別子は http://www.example.com/mypage.html#section_3 のように、アンカー識別子の後に続く数字を使用して構成されます。

以下の例では、参照 URI の target 要素であるクラス important の div 要素が選択されます。ドキュメントの URI にフラグメント識別子がない場合、target 要素は存在しません。

div.important:target
UI 要素の状態疑似クラス

UI 要素の状態疑似クラスを使用して、特定の状態 (有効、無効、選択済み (チェック済み) など) にある UI 要素 (ラジオ ボタンやチェックボックスなどのフォーム コントロール) を選択します。

以下の例では、有効である E フォーム コントロール要素が選択されます。

E:enabled

以下の例では、無効である E フォーム コントロール要素が選択されます。

E:disabled 

以下の例では、選択されている E フォーム コントロール要素が選択されます。

E:checked 

: indeterminate 疑似クラスは、トグルの状態が判断できない (オンでもオフでもない) ラジオ ボタンとチェック ボックスを選択します。以下の例では、状態が判断できない E フォーム コントロール要素が選択されます。

E:indeterminate

注意   :indeterminate 疑似クラスは現在の CSS3 仕様では定義されていませんが、数多くの著名なブラウザーでサポートされています。

negation 疑似クラス

negation 疑似クラスは、引数として単純なセレクターを受け、その引数によって選択されていない要素を選択します。以下の例では、単純セレクター s と一致しない E 要素が選択されます:

E:not(s)
UI 要素フラグメント疑似要素

UI 要素フラグメント疑似要素の ::selection を使用して、編集可能なテキスト フィールド内のテキストを含む、ユーザーが強調表示したページの任意の部分を選択します。この疑似要素は、 color と background-color プロパティに適用できます。以下の例では、E 要素内のユーザーが選択したテキストが選択されます。

E::selection 

注意   ::selection 疑似要素は現在の CSS3 仕様では定義されていませんが、数多くの著名なブラウザーでサポートされています。

その他の CSS 機能

Internet Explorer 9 では、CSS Object Model (OM) 表示モジュール作業草案の一部のサポートが実装されています。

CSSOM 表示モジュール

CSSOM 表示モジュールは、レイアウト ボックスの位置、ビューポートの幅、および要素のスクロールなどを含む、ドキュメントとそのコンテンツの視覚的なプロパティを Web 開発者が調査し、プログラムで変更するための API を定義します。Internet Explorer 8 では、このモジュールの一部のサポートが導入されました。Internet Explorer 9 では、さらに多くの CSSOM 表示 API 向けにサポートが拡張されます。

  • ClientRect ( TextRectangle) インターフェイス
    • width プロパティ
    • height プロパティ
  • Range インターフェイスへの機能追加
  • Screen インターフェイス
  • Screenview インターフェイス

データ URI

データ URI とは、Web ページのコンテキストにデータを直接埋め込む手段です。最も一般的な例は、以下のような Web ページに埋め込まれた小さな画像です:

data:image/gif;base64,R0lGODdhMAAwAPAAAAAAAP

img 要素の src 属性に置くと、このテキストは、ページのマークアップに画像を効果的に埋め込みます。Internet Explorer には、Internet Explorer 8 においてデータ URI が導入されました。

Internet Explorer 9 では、開発者は script 要素の src 属性でデータ URI を使用できるようになりました。さらに、データ URI のサイズの上限が、32 キロバイト (KB) (Internet Explorer 8) から 4 ギガバイト (GB) (Internet Explorer 9) まで引き上げられました。

DOM (Document Object Model) の改善点

Internet Explorer 9 には、大幅に改善された DOM (Document Object Model) が備わっています。World Wide Web Consortium (W3C) DOM Level 2 (L2) と L3 のサポートの強化に加え、Internet Explorer 9 では、DOM の強化と空白文字の処理の改善が行われています。

強化された DOM の概要

Internet Explorer 9 の強化された DOM により、新しい JavaScript エンジンである “Chakra” と Trident レイアウト エンジン間のスクリプト実行レイヤーがスピードアップし、さらに DOM のエントリ ポイントが Chakra エンジン内に移動したことから、Internet Explorer 9 標準モード (IE9 モード) の全体的なパフォーマンスが向上しています。IE9 モードの詳細については、このドキュメントの「標準規格サポートによる改善された相互運用性」を参照してください。強化された DOM はあわせて、W3C DOM L2 と L3 仕様で指定されている、正しい DOM 継承オブジェクト階層も提供します。

強化された DOM オブジェクトの種類は、Internet Explorer 9 標準モードでのページ実行時に、F12 開発者ツールに反映されるようになりました(Internet Explorer 9 の新しい F12 開発者ツールの詳細については、このドキュメントの「F12 開発者ツール」を参照してください)。レガシの COM ベースの種類 (インターフェイスと表示オブジェクトの組み合わせから構成される) を表示する代わりに、IE9 モード ページでは、W3C DOM L2 と L3 標準規格に沿った Chakra エンジンによって使用される実際の強化された DOM オブジェクトの種類の名前 (NodeList、DocumentType、HTMLBodyElement など) が報告されます。

Internet Explorer 9 が備える強化された DOM により、Internet Explorer 9 と他のブラウザー間の相互運用性の状況が飛躍的に向上します。また、主に DOM オブジェクトがネイティブな JavaScript オブジェクトとして表現されることから、さまざまなシナリオにおいて同時にパフォーマンスも向上します。

強化された DOM により、新しい JavaScript エンジンである "Chakra" が提供するさまざまな新機能が、DOM が提供するオブジェクトと API にまで拡張されます。拡張される内容を以下に挙げます:

  • 選択的に DOM オブジェクトを拡張可能 (Object.preventExtensions から実行)
  • DOM API を変更可能 (DOM API のプロパティを変更、またはプロパティ全体を削除することで実行)
  • DOM オブジェクトの JSON サポート
  • 継承によるネイティブ JavaScript オブジェクト (hasOwnProperty、toString など)
  • 継承によるネイティブ JavaScript 関数 (call、apply、bind)

これらの機能により、JavaScript エンジンのネイティブ オブジェクトと DOM 間のプログラミング エクスペリエンスが統一されます。さらに、以下の新規 DOM 機能が追加されました:

  • W3C DOM 例外:DOM 例外は、DOM API の異常終了の結果として投げられる、新しい種類のエラー オブジェクトです。これらの例外のエラー コードは、例外自体に定義されている定数にマップされます。
  • W3C DOM “const” プロパティ (Node.ELEMENT_NODE など):const プロパティは、その他の DOM API から戻される、数多くの一般的な数値の戻り値に名前を与える単純なフィールドです。たとえば、nodeType DOM API によって戻される数値を定数と照らし合わせることで、より人間が分かりやすいコードを作成できます:if (myElement.nodeType == Node.ELEMENT_NODE)

XML から DOM への解析、および DOM から XML へのシリアル化

Internet Explorer には、XML からネイティブ DOM への解析、およびネイティブ DOM から XML へのシリアル化のためのサポートが既に備わっていますが、HTML ドキュメント内からこの機能にアクセスするスクリプトを記述する簡単な方法はありませんでした。このため、Internet Explorer 9 には DOMParser と XMLSerializer インターフェイスのサポートが追加されています。これらのインターフェイスは、その他の著名なブラウザーで幅広くサポートされています。

以下のスクリプト例では、DOMParser インターフェイスを使用して、文字列を解析して XML ドキュメントにする方法を示します:

var parser = new DOMParser();
var doc = parser.parseFromString("<test>Some XML</test>", "text/xml");

以下のスクリプト例では、XMLSerializer インターフェイスを使用して、DOM ノード (HTML ドキュメントからのノード含む) を XML 文字列にシリアル化する方法を示します:

var serializer = new XMLSerializer();
var xmlString = serializer.serializeToString(doc);

DOM (Document Object Model) レベル 2 と 3

Internet Explorer 9 では、数多くの DOM (Document Object Model) レベル 2 (DOM L2) とレベル 3 (DOM L3) 向けサポートが追加され、Internet Explorer での既存の実装から DOM L2 サポートが改善されます。さらに、 WebIDL 作業草案仕様のサポートも追加されます。

Internet Explorer 9 では、以下の DOM 機能向けサポートが導入されます。

DOM Core (L2 と L3) および Views (L2)

Internet Explorer 9 では、以下に挙げる数多くの新しい DOM L2 Core API 向けサポートが追加されます:

また、*NS メソッド、および名前空間関連のプロパティ (createElementNS、namespaceURI、localName、prefix などの DOM 名前空間の相互運用可能サポートも追加されます。Internet Explorer 9 では、一般的に使用されている数多くの DOM L3 Core メソッドとプロパティもサポートされます。

  • adoptNode
  • compareDocumentPosition
  • CDATASection
  • importNode
  • inputEncoding
  • isDefaultNamespace
  • isEqualNode
  • isSameNode
  • isSupported
  • lookupNamespaceURI
  • lookupPrefix
  • replaceWholeText
  • textContent
  • xmlEncoding
  • xmlStandalone
  • xmlVersion
  • wholeText

Internet Explorer 9 では、両方の DOM L2 Views プロパティが完全にサポートされています。

詳細については、MSDN の「 DOM Core と Views」を参照してください。

DOM Element Traversal

Element Traversal 仕様は ElementTraversal インターフェイスを定義します。このインターフェイスにより、HTML、XML または SVG ドキュメント内の要素ノードなど、DOM ツリー内の要素のスクリプト経由でのナビゲーションが可能になります。Internet Explorer 9 では、ElementTraversal インターフェイスとその 5 個のプロパティのサポートが導入されます。

DOM L2 と L3 Events

DOM Events 仕様は、DOM イベント システムを記述します。この DOM イベント システムにより、イベント ハンドラーの登録が可能となり、ドキュメント ツリー内でのイベントのフローが記述され、イベントのコンテキスト情報が定義されます。イベント モデルの詳細については、MSDN の「 イベント モデルについて」を参照してください。

Internet Explorer 9 のイベント システムの主要な目標の 1 つは、W3C によって指定されている相互運用可能なシステムに準拠することにあります。これにより、Internet Explorer のプロプラエタリな attachEvent モデルを取り去り、ブラウザーごとにコードを分岐させる必要がなくなります。

  • DOM L2 と L3 Events
    • イベント登録とディスパッチ API ( addEventListener、 removeEventListener、 createEvent、および dispatchEvent)
    • イベントのキャプチャ、バブル、およびターゲット段階
    • 新規イベント オブジェクト ( KeyboardEvent、 MouseEvent、 MutationEvent などに加え、アプリケーション固有のイベント用の CustomEvent、さらに他の標準のイベント タイプ用のイベント オブジェクト インターフェイス ( DragEvent など)、
    • HTML5 の新しい標準に基づいたイベント タイプ (composition events、text events、wheel events、DOM mutation events など))

注   DOM Mutation イベントは標準への完全な準拠のために含まれていますが、W3C 標準では廃止予定です。

DOM L2 HTML

Internet Explorer 9 では、従来のバージョンの Internet Explorer では利用できなかった DOM L2 HTML API のサポートが追加されます。これには、getElementsByClassName および characterSet などの HTML5 API が含まれます。Internet Explorer 9 では、特に要素を追加したり削除する DOM 操作に関し、表のオブジェクト モデルが改善されています。

getElementsByClassName

getElementsByClassName メソッドは、入力文字列に一致するクラス属性があるすべての要素ノードを戻します。この機能は、 getElementsByTagName メソッドに類似しています。

characterSet

characterSet 属性は、現在のドキュメントの文字エンコードの優先 MIME 名を戻します。

DOM L2 Style

DOM L2 Style 仕様は、ルールの削除と変更を行うことで、個別の要素とスタイル シート全体両方のスタイルにプログラムでアクセスして変更するための API を定義します。従来のバージョンの Internet Explorer では、プロプラエタリなメソッドを使用してこれらのタスクを実現することができました。Internet Explorer 9 では、DOM L2 Style 仕様で定義された標準化されたAPI 向けサポートが追加されます。さらに、 getComputedStyle メソッドなど、Internet Explorer に同等メソッドがない標準化された API のサポートが追加されました。 Internet Explorer Test Drive サイトで、getComputedStyle メソッドが実際に動作する例を確認してください。

詳細については、MSDN の「 DOM Style」を参照してください。

DOM L2 Traversal と Range

DOM L2 Traversal と Range 仕様の DOM Range 部分は、2 つの境界点間のドキュメント コンテンツを選択するための一般的な方法を定義します。今日開店は、コンテナー (点を含む親要素) とオフセット(点が存在するコンテナー内の位置) によって定義されます。HTML5 Selection インターフェイスと併用することで、DOM Range 機能で、範囲の取得、子の選択、および選択項目の削除をプログラムで行えるようになります。

Internet Explorer 9 では、すべての DOM L2 Range API、さらに、既に広範に使用されている setSelectionRange メソッドを含むすべて HTML5 Selection API がサポートされます。

詳細については、MSDN の「 DOM Range」を参照してください。

DOM L2 Traversal と Range 仕様の DOM Traversal 部分は、ドキュメント内を移動して、必要に応じてノードをフィルターする方法を定義します。Internet Explorer 9 では、W3C 仕様で定義されている DOM 内を移動する 2 つの方法 (NodeIterator と TreeWalker) の両方と、ノードをフィルターする 2 つの方法 (whatToShow と NodeFilter) の両方がサポートされます。

詳細については、MSDN の「 DOM Traversal」を参照してください。

DOM 空白文字の処理

DOM 内に空白文字を配置する場合、Internet Explorer とその他のブラウザーでは異なる処理が行われていました。この部分で相互運用性が欠けていたことから Web 開発者の負担となっていました。従来のバージョンの Internet Explorer では、空白文字があるとそれを無視し、DOM 内のテキスト ノードにはその空白文字を配置しませんでした。Internet Explorer 9 では、期待通りに空白文字は維持され、DOM 内のテキスト ノードに配置されます。この動作は、その他の大半のブラウザーと同じです。

ECMAScript 5

Internet Explorer 9 では、改善された JavaScript パフォーマンスに加え、JavaScript 言語機能に機能強化が施されます。2009 年 12 月、ECMA は ECMA-262 第 5 版 を第 3 版の後続版 (第 4 版は未公開) として承認しました。この年に Microsoft は ECMAScript 5 (ES5) 要素のサポートを開始し、ネイティブ JSON サポートおよび DOM オブジェクトのアクセサー サポート が Internet Explorer 8 に追加されました。ES5 により、JSON とDOM アクセサーのサポートにとどまらず、 JavaScript 言語に対する数多くの重要な機能強化が標準化されます。

Internet Explorer 9 に実装されている重要な ECMAScript 5 機能は数多く存在します。以下に例を挙げます:

Internet Explorer 9 では、Internet Explorer の JavaScript の従来の実装に見受けられたいくつかの問題も修正されます。詳細については、「 Internet Explorer チーム ブログ」を参照してください。実際に動作する ECMAScript 5 サポートを確認するには、 Internet Explorer Test Drive サイトにアクセスしてください。

HTML5

Internet Explorer 8 では、以下に挙げる HTML5 作業草案仕様 のいくつかの機能のサポートが導入されました。

Internet Explorer 9 は、Internet Explorer 8 における HTML5 準拠をベースとして、以下のような新しい機能を実装しています:

  • HTML5 Geolocation API
  • 新しい video と audio HTML 要素
  • 新しい canvas HTML 要素
  • Selection インターフェイス
  • さらに相互運用性が高くなった HTML 解析
  • いくつかの新しい DOM API。このドキュメントの「DOM L2 HTML」セクションで説明しています
  • Scaling Vector Graphics (SVG)

注意  本稿執筆の時点では、HTML5 仕様は作業草案段階にあることに注意してください。勧告候補 (Candidate Recommendation) 段階に至るまでは、大幅に変更される場合があります。詳細については、「 最新 HTML5 作業草案」を参照してください。

HTML5 の Geolocation

Internet Explorer 9 では、Geolocation のサポートが追加されています。Geolocation API を使用すると、Web アプリケーションは Internet Explorer を実行している PC の現在の Geolocation にアクセスできます。Web ページで、位置情報に基づくユーザー エクスペリエンスを用意できます。たとえば、地図上の位置を示したり、天気やニュースなどの最新のローカル情報を表示できます。位置データは、緯度と経度の座標の形式で返されます。Internet Explorer 9 の Geolocation API は、「 Geolocation API Specification」で示された標準に準拠しています。

Internet Explorer 9 Test Driveサイトで、Geolocation の実際の動作を確認してください。

Geolocation の詳細については、「 MSDN」を参照してください。

HTML5 video と audio 要素

Internet Explorer 9 でサポートされることになる最も要望が高かった 2 つの HTML5 機能が、新しい video と audio 要素です。video と audio 要素は、いずれも HTML5 仕様の「 組み込みコンテンツ」セクションで定義されます。

基本的に、video と audio 要素は、映像と音声コンテンツの HTML ページへの組み込みを可能にします。Web 開発者は、両要素のいくつかの属性を指定することもできます。例として、以下のマークアップを考えます。

<video width="400"
    height="300"
    src="video.mp4"
    poster="frame.png"
    autoplay
    controls
    loop>
    This content appears if the video tag or the codec is not supported.
 </video>

Internet Explorer 9 では、これは 400×300 の領域 (width と height 属性) に表示され、映像コンテンツの読み込み中には、画像ファイル"frame.png" (poster 属性) が表示されます。映像ファイル"video.mp4" (src 属性) はページが読み込まれると自動的に再生を開始し (autoplay 属性)、映像を制御するためのコントロールが表示 (controls 属性) されます。映像が完了すると、映像は繰り返し再生されます (loop 属性)。映像の形式がサポートされていない場合、video 要素内のテキスト (“このコンテンツは、...") が代わりに表示されます。video 要素では preload 要素もサポートされます。この要素を使用することで、Web 開発者は最善のユーザー エクスペリエンスを提供できます。

実際に動作する video 要素の例を確認するには、Internet Explorer Test Drive サイトの「 ビデオ パノラマ」デモを参照してください。

Internet Explorer 9 では、複数のソースでの video 要素がサポートされています。各ソースは、子要素 source によって指定します。例として、以下のマークアップを考えます。

<video width="400" height="300" poster="frame.png" autoplay controls loop>
    <source src="video.ogv" type='video/ogg; codecs="theora,
     vorbis"'>
    <source src="video.mp4" type='video/mp4; codecs="avc1.42E01E,
     mp4a.40.2"'>
 </video>

ここでは、Internet Explorer 9 は最初に一覧されているサポートされた形式を選択し (この場合、2 番目の source 要素)、その形式に関連づけられたソース ファイルを再生します。

audio 要素は video 要素と同様に定義されますが、width、height、および poster 属性はありません。実際に動作する audio 要素の例を確認するには、 Internet Explorer Test Drive サイトにアクセスしてください。

Internet Explorer 9 では、以下のコンテンツ形式がサポートされます:

要素名サポートされる形式
video

MP4 コンテナー、H.264 ビデオ、すべてのプロファイル―AAC や MP3 の音声

VP8 コーデックがインストールされている場合は WebM ビデオ

audioAAC ã‚„ MP3

詳細については、MSDN の「 HTML5 video と audio」を参照してください。

HTML5 canvas 要素

Internet Explorer 9 で新たに導入された、要望が高かったもうひとつの新しい HTML5 機能は、 canvas 要素です。これは、Canvas 2D API と一緒に使用します。canvas 要素は、「 HTML5 仕様」で定義されているように、解像度依存のビットマップ キャンバス上へのグラフィックのレンダリングを可能にします。キャンバスに描画するには、Canvas 2D コンテキストなどの "コンテキスト" を使用します。これは、W3C Canvas 2D API 仕様に指定されています。Internet Explorer 9 では、canvas 要素のサポートが導入されます。2D Canvas 描画 API が、サポートされる唯一のコンテキストとなります。(Internet Explorer 9 では、Canvas 2D コンテキストは CanvasRenderingContext2D オブジェクトまたは ICanvasRenderingContext2D インターフェイスによって表されます)Internet Explorer 9 のすべてのグラフィックと同様、canvas は、Windows と GPU によるハードウェア アクセラレーションが行われます。

canvas を使用することで、長方形、パス、直線、フィル、円弧、ベジエ曲線、および 2 次曲線を含む描画シナリオが可能になります。さらに、Internet Explorer 9 の canvas 要素では、 width と height 属性がサポートされます(width と height の既定値はそれぞれ 300 と 150 ピクセルで、既定の色は透明の黒色です)。

キャンバスは、Web 上にグラフィックをプログラムするための方法です。canvas タグは "即時モード" (描画コマンドがグラフィック ハードウェアに直接送信される) の 2 次元描画用サーフェイスです。別のプラグインをダウンロードする必要なしにリアルタイムのグラフ、アニメーション、インタラクティブなゲームを提供できます。 CanvasRenderingContext2D オブジェクトで定義されている API により、canvas では以下に挙げる描画シナリオが可能となります:

JavaScript を使用してキャンバス描画をアニメーションさせたり、キーボード入力、マウスのクリック、またはその他のブラウザー イベントを合わせたインタラクティブなエクスペリエンスを作成できます。たとえば、Internet Explorer Test Drive サイトにある この例では、数行の JavaScript で、ランダムに配置され色付けされる伸びる直線が作成されます。

Internet Explorer 9 の canvas 要素では、width と height 属性がサポートされます。(width と height の既定値はそれぞれ 300 と 150 ピクセルで、既定の色は透明の黒色です)。

Internet Explorer 9 は、次の Canvas 2D コンテキスト API をサポートします ( CanvasRenderingContext2D オブジェクトにより公開されるメンバー):

Internet Explorer 9 の HTML5 Canvas の詳細については、 MSDNを参照してください。さらに、 Internet Explorer Test Drive サイトにアクセスして、canvas 要素のさまざまなデモをご覧ください。Internet Explorer 9 での canvas 要素の技術情報については、MSDN の「 canvas 要素のリファレンス ページ」を参照してください。

HTML 解析の改善点

Internet Explorer 9 では HTML 解析が改善されており、HTML5 の作業草案に説明されている動作にさらに近付きました。

HTML での SVG の解析

Internet Explorer 9 では、HTML に直接組み込まれた SVG がサポートされます。SVG の詳細については、このガイドの「SVG (Scalable Vector Graphics)」を参照してください。

XHTML の解析

Internet Explorer 9 では、MIME-TYPE が application/xhtml+xml であるドキュメントを XHTML として解析します。

一般要素

従来の Internet Explorer では、認識できない要素を "不明な" 要素として解析していました。これらの要素はつぶされてしまい、通常の CSS スタイル ルールが適用されませんでした。これは、HTML5 草案仕様に準拠していませんでした。Internet Explorer 9 では、この動作が変更され、認識されない要素は "一般" 要素として解釈され、通常の要素のように機能します。これにより、 document.createElement を呼び出して、Internet Explorer に強制的に要素を認識させるなどの開発者による回避策の必要がなくなります。

以下のマークアップは、一般要素 (この場合では mydiv という未定義の要素) の簡単な例です。

<style type="text/css">
 mydiv {
     color:blue;
     font-weight:bold;
 }
 </style>

...

<p>I am using a <mydiv>generic element</mydiv> in this sentence.</p>

Internet Explorer 8 では、mydiv タグと、それに関連付けられた CSS ルールが無視されていました。この文は、次のようにレンダリングされます。

Internet Explorer 9 では、mydiv タグが予期されるとおりに解析され、次のようにレンダリングされます。

オーバーラッピング タグ

HTML にオーバーラッピング タグが含まれている場合、Internet Explorer 8 以前のバージョンでは、解析時に解決することはできませんでした。この動作は、HTML5 草案仕様に指定されている動作に反します。ここで見るようなスクリプトの目的でいくつかの要素をオーバーラップさせると、分かりにくいスクリプトのエラーとなることがあります。Internet Explorer 9 は HTML5 草案仕様に準拠するため、オーバーラッピング タグを解析時に解決します。

以下のマークアップは、オーバーラップする i と b タグの間のテキストを赤色にするスクリプトの簡単な例です。

<script type="text/javascript">
 function load()
 {
     var elms = document.getElementsByTagName("i");
     for(var i = 0; i < elms.length; i++)
     {
          var elm = elms[i];
           if(elm.parentNode.tagName.toLowerCase() == "b")
                elm.style.color = "red";
     }
 }
 </script>

...

<body onload="load();">
 You should be aware of how <b>this <i>affects</b> script</i>.
 </body>

Internet Explorer 8 以前では、このマークアップは期待に反して次のようにレンダリングされます。

Internet Explorer 9 では、マークアップは期待通りにレンダリングされます。

script と style ブロックでの解析の変更点

Internet Explorer 8 以前のバージョンでは、 script や style ブロック内のテキストが、DOM のテキスト ノードに維持されませんでした。Internet Explorer 9 では、script や style ブロック内のテキストが、期待通りにテキスト ノードとして DOM に維持されます。これにより、DOM 内でテキスト ノードとしてソース コードが利用できるため、スクリプトでソース コードを操作できます。

HTML5 選択 API

Internet Explorer 9 では、3 つの HTML5 テキスト選択 API のサポートが追加されます。 Selection オブジェクトは、Internet Explorer 9 の DOM L2 Range 向けの新しいサポートによって利用できる Range オブジェクトの一覧を表します。詳細については、このドキュメントの「DOM (Document Object Model) の改善点」を参照してください。

getSelection メソッド

getSelection メソッドは、現在選択されたテキストを表すウィンドウの Selection オブジェクトを戻します。

selectionStart プロパティ

selectionStart プロパティは、現在選択されているテキストの開始点へのオフセットを取得し、選択の開始点を設定することもできます。

selectionEnd プロパティ

selectionEnd プロパティは、現在選択されているテキストの終了点へのオフセットを取得し、選択の終了点を設定することもできます。

HTML5 セマンティック要素

Internet Explorer 9 では、HTML5 セマンティック要素のいくつかにおいてサポートが強化されています。この文脈での「セマンティック」要素とは、タグ名が内容の説明となっており、特別な動作を持たない要素を指します。セマンティック タグは、特にアクセシビリティの点で有用となる場合があります。

Internet Explorer 9 では、セマンティック要素のサポートに以下の変更が行われています。

  • HTML5 仕様に従い、要素は HTMLUnknownElement インターフェイスではなく、 HTMLElement インターフェイスから継承するようになりました。
  • 既定で、要素は HTML5 仕様に従って表現されるようになりました。

次のセマンティック要素が認識されるようになりました。

  • section
  • nav
  • article
  • aside
  • hgroup
  • header
  • footer
  • figure
  • figcaption
  • mark

ICC カラー プロファイル

International Color Consortium (ICC) は、ソフトウェアとハードウェアの両方のカラー属性を記述する、カラー プロファイルを公開しています。

Internet Explorer 9 では、「 ICC 仕様」で定義されている、画像上での ICC v2 と v4 カラー プロファイルのサポートが導入されます。

セレクター API レベル 2

「 セレクター API レベル 2 仕様」は、DOM (Document Object Model) 内でセレクターを評価できるようにするアプリケーション プログラミング インターフェイス(API) のセットを定義します。

Internet Explorer 8 では、セレクター API querySelector と querySelectorAll が実装されていました。Internet Explorer 9 では、msMatchesSelector メソッドのサポートが追加されています。

SVG (Scalable Vector Graphics)

SVG (Scalable Vector Graphics) のサポートは、Internet Explorer の実装で最も要望の高かった機能の 1 つでした。SVG は、プラグインや独立したビューアーを必要とせずに、高精細で容易に拡大縮小できる、小型で単純なものから大型で複雑な視覚効果を Web サイトに追加するための強力な手法です。

Internet Explorer 9 では、基本 SVG 機能セットのサポートが導入されます。Internet Explorer 9 での SVG サポートは、「 SVG 1.1 (第 2 版) 仕様推奨案」 (デスクトップ ブラウザー用) をベースとしています。以下の機能が実装されました:

  • ほとんどの SVG ドキュメント構造、相互作用機能 (イベントのスクリプト)、およびスタイル (インラインと CSS)
  • 以下に挙げる多くの表現要素と、それに対応する属性と DOM インターフェイス:
    • 基本図形
    • フィル、ストローク、マーカー、およびカラー
    • グラデーションおよびパターン
    • パス
    • テキスト

Internet Explorer 9 では、以下に挙げる SVG マークアップを表示するためのメソッドがサポートされます:

  • HTML5 組み込みの SVG フラグメント。外部オブジェクトは使用しません (つまり、HTML に <svg> タグを含めるだけです)
  • 完全なドキュメントの種類としての SVG (.svg ファイル拡張子)
  • XML または XHTML 内の SVG (HTML5 と同様ですが、XML または XHTML ファイルにのみ適用)
  • CSS 画像としての SVG
  • 以下のように object 要素を使用する SVG (type、height、および width 属性に注意): 
    <object data="rect2.svg" width="100%" height="400px"
        type="image/svg+xml"></object>

  • 以下のように img、embed、iframe、または frame 要素を使用する SVG: 
    <embed id="Smiley" src="smiley.svg" type="image/svg+xml">

Internet Explorer 9 での SVG サポートの詳細については、「 MSDN」を参照してください。

SVG の詳細については、MSDN の svg 要素のリファレンス ページを参照してください。

基本図形

Internet Explorer 9 では、「SVG 1.1 (第 2 版) 仕様」の「 基本図形モジュール」に指定されている、基本図形要素、その属性、および関連する DOM インターフェイスすべての解析とレンダリングのためのサポートが導入されます。Internet Explorer 9 でサポートされる基本図形のセットは、以下の図形要素から構成されます:

Internet Explorer 9 では、これらの要素に関連付けられた DOM インターフェイスもサポートされます。

先述の図形要素それぞれの例を挙げます。マークアップと、それに対応する Internet Explorer 9 での結果のスクリーンショットです。

長方形:rect 要素
<?xml version="1.0" standalone="no"?>
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
    "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 <svg version="1.1" xmlns="http://www.w3.org/2000/svg">

<rect fill="orange"
    stroke="black"
    width="150"
    height="75"
    x="50"
    y="25" />

 </svg>

<rect fill="orange"
    stroke="black"
    width="150"
    height="100"
    x="50"
    y="25"
    rx="10"
    ry="50"/>

詳細については、MSDN の rect 要素のリファレンス ページを参照してください。

円:circle 要素
<circle fill="orange"
    stroke="black"
    stroke-width="3"
    cx="40"
    cy="25"
    r="20"/>

詳細については、MSDN の circle 要素のリファレンス ページを参照してください。

楕円:ellipse 要素
<ellipse stroke="orange"
    cx="100"
    cy="60"
    rx="75"
    ry="50"/>

詳細については、MSDN の ellipse 要素のリファレンス ページを参照してください。

直線:line 要素
<!-- 垂直方向 -->
<line x1="0.7cm"
    y1="1cm"
    x2="0.7cm"
    y2="2.0cm"
    style="stroke:
    blue;"/>

<!-- 対角方向 -->
<line x1="30"
    y1="30"
    x2="150"
    y2="85"
    stroke="red"
    stroke-width="4"/>

<!-- 水平方向 -->
<line x1="50pt"
    y1="25pt"
    x2="150pt"
    y2="25pt"
    stroke="yellow"
    stroke-width="3"/>

詳細については、MSDN の line 要素のリファレンス ページを参照してください。

ポリライン:polyline 要素

“ポリライン” は、SVG でいくつかのつながった直線として定義され、主に "開いた" 図形、つまり 1 つ以上の辺が欠けた多角形や、凸状ではない図形を表します。

<polyline points="15, 5, 100 8,3 150"
    fill="orange"
    stroke="black"
    stroke-width="4"/>

詳細については、MSDN の polyline 要素のリファレンス ページを参照してください。

多角形:polygon 要素

多角形は閉じた図形です。

<polygon points="15, 5, 100 8,6 150"
    fill="orange"
    stroke="black"
    stroke-width="4"/>

詳細については、MSDN の polygon 要素のリファレンス ページを参照してください。

クリッピング、マスク、および合成

Internet Explorer 9 では、「SVG 1.1 (第 2 版) 仕様」の「 クリッピング、マスク、および合成」に指定されている、SVG クリッピング、クリップ パス、マスク、および不透明度がサポートされています(SVG パスは、このドキュメントの「パス」で説明しています)。

クリッピング

クリッピング パスは、カラー、パターン、または画像を描画できる領域をカット、または "クリップ" します。クリッピング パスの外部にあるグラフィック要素のどの部分も描画されません。クリッピング パスは完全に不透明です。クリッピング パスの外部にあるグラフィック要素の部分は完全に非表示になります。

SVG では、overflow と clip プロパティが、コンテンツが中に表示される最初のクリッピング パス、および図形を決定します。既定では、最初のクリッピング パスは、SVG ビューポート、または SVG コンテンツが表示されるページの長方形領域として定義されます。

clipPath 要素がクリッピング パスを定義します。クリッピング パスの参照には、clip-path プロパティが使用されます。clip-rule プロパティは clipPath 要素内のグラフィック要素に適用され、clipPathUnits 属性により clipPath のコンテンツの座標系が定義されます。クリッピング パスは、テキスト、およびカラー、パターンと画像に適用できます。

クリッピング機能には、SVGClipPathElement DOM インターフェイスによりプログラムからアクセスできます。

以下のコードは SVG クリッピング パスの簡単な一例です。

<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
    "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
 <svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
         width="400" height="100">
 <clipPath id="clip1">
    <circle id="clipShape" cx="60" cy="60" r="50" />
 </clipPath>
 <rect x="20" y="20" width="100" height="100" fill="blue"
    clip-path="url(#clip1)" />
 </svg>

この例では、clipPath 要素を使用して、円の図形の中にクリッピング パスを定義します。clip-path プロパティを使用して、長方形にクリッピング パスを適用します。これにより、Internet Explorer 9 で以下の結果が得られます。

マスク

マスク はクリッピング パスとほぼ同じですが、半透明である点が異なります。マスクは、手前のオブジェクトを現在の背景に合成するときによく使用されます。

mask 要素はマスクを定義します。その後、マスクの参照には mask プロパティが使用されます。

以下のコードは SVG マスクの簡単な一例です。

<?xml version="1.0" standalone="no"?>
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
    "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 <svg width="4cm" height="4cm" viewBox="0 0 800 300" version="1.1"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <desc>Example mask01 - three different colored circles used to mask the color of a rectangle
  </desc>
     <defs>
     <g id="circles">
            <g stroke="white" stroke-width="2" >
                <circle cx="100" cy="50" r="50" fill="rgb(255,0,0)" />
                <circle cx="50" cy="135" r="50" fill="rgb(0,255,0)" />
                <circle cx="150" cy="135" r="50" fill="rgb(0,0,255)" />
            </g>
        </g>       
        <mask id="myMask" >
            <use xlink:href="#circles" />
        </mask>
     </defs>
     <rect x="0" y="0" width="100%" height="100%" fill="purple"
          mask="url(#myMask)" />
</svg>

この例では、mask プロパティを使用して、異なる色の 3 つの並んだ円の図形にマスクを定義します。mask プロパティを使用して、紫色の長方形にマスクを適用します。これにより、Internet Explorer 9 で以下の結果が得られます。

座標系、変換、および単位

Internet Explorer 9 では、「SVG 1.1 (第 2 版) 草案仕様」の「 座標系、変換、および単位」に指定されている、SVG 座標系、変換、および単位がサポートされています。Internet Explorer 9 でサポートされる機能を以下に挙げます:

  • 単位とパーセント。
  • 任意の要素に対する任意の変換と transform 属性。
  • viewBox と preserveAspectRatio プロパティ (overflow プロパティとの対話を含む)。
  • 変換と変換一覧の種類のサポート。

Internet Explorer 9 では、SVG 座標系と変換に関連する DOM インターフェイスもサポートされます。

ドキュメント構造

Internet Explorer 9 では、「SVG 1.1 (第 2 版) 仕様」の「 ドキュメント構造」、「 メタデータ」、および「 拡張性」モジュールに指定されている、基本的なドキュメント構造、メタデータ、および拡張性機能のサポートが導入されています。Internet Explorer 9 でサポートされる要素を以下に挙げます:

Internet Explorer 9 では、これらの要素に関連付けられた DOM インターフェイスもサポートされます。

グラデーションおよびパターン

SVG により、カラー、グラデーション、またはパターンを使用して、図形とテキストをペイントしたり、ストロークできます。Internet Explorer 9 では、「SVG 1.1 (第 2 版) 仕様」の「 グラデーションとパターン モジュール」に指定されている、SVG グラデーションとパターンがサポートされます。

グラデーション

グラデーションのサポートは、グラデーション関連の要素 ( linearGradient と radialGradient) および属性 ( gradientUnits と gradientTransform) から提供されます。グラデーションのカラーは stop 要素で定義されます。グラデーション関連の要素は、SVG 図形の fill と stroke プロパティ内で使用できます。例として、以下のマークアップを考えます:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
     <defs>
      <linearGradient id="MyGradient">
        <stop offset="10%" stop-color="yellow" />
        <stop offset="90%" stop-color="blue" />
      </linearGradient>
     </defs>

    <rect fill="url(#MyGradient)" stroke="black" stroke-width="5" 
          x="20" y="20" width="300" height="100"/>
 </svg>

このマークアップは、線形のグラデーションのある長方形を定義します。2 つの stop 要素が、色遷移のベクトルに沿ったカラーの終点を指定します (黄色は 10%、青色は 90% の点)。これは、Internet Explorer 9 で以下のように表示されます:

パターン

パターンのサポートは、 pattern 要素とその属性から提供されます。グラデーションと同様、pattern 要素は、SVG 図形の fill と stroke プロパティ内で使用できます。例として、以下のマークアップを考えます。

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
     <defs>
    <pattern id="mycircleandsquare" patternUnits="userSpaceOnUse"
        x="0" y="0" width="150" height="100">
      <circle cx="50" cy="50" r="10" fill="yellow" stroke="blue"
        />
      <rect x="100" y="0" width="50" height="50" fill="blue"   
        stroke="yellow" />
    </pattern>
  </defs>
  <ellipse fill="url(#mycircleandsquare)" stroke="black"
     stroke-width="5" cx="400" cy="200" rx="350" ry="150" />
 </svg>

この例では、pattern 要素は、交互に現れる小さな青色の正方形と小さな黄色の円から構成されるパターンを定義します。次に、指定した楕円をパターンでフィルします。Internet Explorer 9 には、以下の画像のように表示されます。

相互作用性

SVG コンテンツはインタラクティブ、つまり、ユーザー入力に合わせて変更することができます。Internet Explorer 9 では、「SVG 1.1 (第 2 版) 仕様」の「 相互作用性モジュール」に指定されている、以下の SVG 相互作用性機能がサポートされます。

Internet Explorer 9 では、相互作用性モジュールの SVGCursorElement DOM インターフェイスもサポートされます。

さらに、Internet Explorer 9 では、「 SVG Tiny 1.2 仕様」の相互作用性モジュールに指定されている、focusable 属性もサポートされます。

以下のマークアップに、実際に動作する極めて簡単な SV 相互作用性の一例を示します。

<svg xmlns=http://www.w3.org/2000/svg
    xmlns:xlink="http://www.w3.org/1999/xlink" width="600"
    height="600">
  <script type="text/ecmascript">
    <![CDATA[

           // 円を表すオブジェクト
           var redcircle;

           // 円の半径を表す変数
           var r;
    
           window.onload = function() {
                redcircle = document.getElementById('redcircle');
            r = parseInt(redcircle.getAttribute("r"));
           }
    
           var grow = function() {
            r = 2*r;
                redcircle.setAttribute("r",r);
           }

           var shrink = function() {
            r = r/2;
                redcircle.setAttribute("r",r);
           }
     
    ]]>
  </script>
  <circle id="redcircle" cx="100" cy="100" r="50" fill="red"
        onmousedown="grow()" onmouseup="shrink()"/>
 </svg>

このスニペットが読み込まれると、小さな赤色の円が表示されます。

円をクリックすると、その円は 2 倍の大きさになります。

同じ効果を mouseover と mouseout イベントでも実現できます。カーソルを円の上に移動したり、円の上から移動することで、円を拡大、縮小します。

...
  <circle id="redcircle" cx="100" cy="100" r="50" fill="red"
    onmouseover="grow()" onmouseout="shrink()"/>
 ...

リンクと表示

SVG により、SVG コンテンツからその他のページ、および SVG ドキュメントの事前定義された表示にリンクできます。表示は、図の拡大部分などに直接リンクする場合に便利です。

Internet Explorer 9 では、「SVG 1.1 (第 2 版) 仕様」の「 リンク モジュール」に指定されている、SVG リンクと表示がサポートされます。これには、 a と view 要素のサポートが含まれます。

リンク モジュールの関連 DOM インターフェイスである SVGAElement と SVGViewElement もサポートされています。

リンク

HTML の場合と同様に、a 要素は SVG 内でハイパーリンクを作成するのに使用します。たとえば、以下のマークアップは長方形上にハイパーリンクを作成します。

<svg width="100%" height="100%" version="1.1"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">

 <a xlink:href="http://www.bing.com" target="_blank">
    <rect x="20" y="20" width="250" height="250"/>
 </a>

 </svg>
表示

表示を使用して、SVG 画像を特定の方法で表示することをブラウザーに指示できます。たとえば、以下のマークアップは表示へのリンクを定義します。

...
 <a xlink:href="#rect-view">
    <text x="320" y="70" style="fill:red">長方形に移動します</text>
 </a>
 <view id="rect-view" viewBox="280 245 135 85" />
 <rect id="rect-object" style="fill:red" x="280" y="245"
  width="135" height="85"/>
 ...

この例では、rect-view 表示が指定された座標で viewBox として定義されます。リンク ("長方形に移動します" というテキスト) をクリックすると、rect-view 表示が現れ、赤色の長方形が表示されます。

以下のマークアップは、表示への別のリンクを定義します。

...
 <a xlink:href="#circle-view">
    <text x="250" y="70" style="fill:blue">円に移動します</text>
 </a>
 <view id="circle-view" viewBox="5 36 128 115"
  preserveAspectRatio="none"/>
 <circle id="circle-object" style="fill:blue" cx="70" cy="85"
  r="45"/>
 ...

この例では、circle-view 表示の属性 preserveAspectRatio は次の値に設定されています:none. これは、図形が円であっても、表示が呼び出されて指定された viewBox 長方形いっぱいに図形が拡大される際に、均一には拡大されないことを意味します。代わりに、図形の境界ボックスが viewBox 長方形と正確に一致するように、図形は非均一に引き伸ばされます。このマークアップは、ページが最初に読み込まれると、Internet Explorer 9 で次のように表示されます。

[円に移動します] をクリックすると、circle-view 表示が呼び出され、円は viewBox 長方形をフィルするように引き伸ばされます。これにより、円は楕円として表示されます。

ペイントとカラー

ペイントとカラーは、SVG の必要不可欠なコンポーネントです。ペイントの概念には、フィル (単色、グラデーション、パターン)、ストローク (パスに沿って描画された線)、およびマーカー記号 (線分の終端に適用可能な記号。矢印など) が含まれ、さらに不透明度を含めることもできます。フィルとストロークは、パス、テキスト、および図形に適用できます。

Internet Explorer 9 では、「SVG 1.1 (第 2 版) 仕様」の「 ペイント: フィル、ストローク、およびマーカー記号モジュール」と「 カラー モジュール」に指定されている、SVG ペイントとカラーのサポートが導入されます。これには、以下に挙げるサポートが含まれます:

ペイント モジュールの関連 DOM インターフェイスである SVGPaint と SVGMarkerElement もサポートされています。

SVG のフィルとストロークのいくつかの例が、このドキュメントの「パス」セクションに含まれています。

パス

SVG パスは、図形の輪郭です。SVG パスは、フィル、ストローク (パスに沿った線の描画) を行ったり、クリッピング パス (別の図形の切り抜き) として使用できます。

Internet Explorer 9 では、「SVG 1.1 (第 2 版) 仕様」の「 パス モジュール」に指定されている、SVG パスのサポートが導入されます。これには、 path 要素、およびパス データの解析を可能にする d プロパティのサポートが含まれます。

パス モジュールに関連する DOM インターフェイスもサポートされます。

path 要素により、多種多様な開発者シナリオが利用できます。ごくわずかな簡単な例を以下に挙げます。マークアップと、それに対応する Internet Explorer 9 での結果のスクリーンショットです。

直線による閉じた図形とフィル
<?xml version="1.0" standalone="no"?>
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
    "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 <svg version="1.1" xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">

 <path d="M 20 20 L 60 20 L 40 60 z"
    fill="green"
    fill-opacity="0.5"
    stroke="red"
    stroke-width="3" />

 </svg>

ベジエ パス (2 次)
<path d="M20,30 Q40,50 60,30 T100,30"
    fill="none"
    stroke="red"
    stroke-opacity="0.2"
    stroke-width="3" />

円弧付き直線
<path d="M30,60 l 50,0 a25,45 0 0,1 50,0 l 50,0"
   fill="green"
    stroke="blue"
    stroke-width="4" />

テキスト

SVG ドキュメントにはテキストを含められます。テキストは、SVG のその他のグラフィック要素と同じようにレンダリングされます。これは、座標系の変換、ペイント、クリッピング、およびマスクをすべてテキストに適用可能であることを意味します。

Internet Explorer 9 では、「SVG 1.1 (第 2 版) 仕様」の「 テキスト モジュール」に指定されている、テキスト レンダリングがサポートされます。

text 要素は、描画される文字を指定します。SVG では、単語の改行や折り返しが自動的には行われないため、あらかじめ改行を決める必要があります。1 行のテキストでテキスト関連のプロパティ (font、weight、color、kerning、およびその他) を調整するため、SVG には tspan 要素があります。

Internet Explorer 9 では、テキスト モジュールの関連 DOM インターフェイスもサポートされます。

Web 開発者向き新ツール

ここでは、まず Web サイトとユーザー間のつながりを強固にする新しい手法である、ピン留めサイトについて説明します。次に、Internet Explorer の最新バージョンに移行する際の互換性に関する問題に対処するため、Internet Explorer 9 での新しいバージョンの割り当て方を説明します。最後に、Internet Explorer 8 ではじめてブラウザーに直接組み込まれた開発者ツールの改善点について説明します。

ピン留めサイト

ピン留めサイトを利用すると、開発した Web サイトへのユーザーの興味をより高めることができます。ピン留めサイトは、サイトを強化するユーザー インターフェイスが特長的な新しいツールのセットです。サイトのブランドや全体の外観に合わせて統一できる大きなお気に入りアイコン (favicon)、[戻る] ボタンと [進む] ボタン、その他のインターフェイス要素など、サイトによりカスタマイズ可能なユーザー インターフェイスを備えています。Windows 7 との統合によって、最新の Windows API を使用して Web サイトの ジャンプ リスト、 縮小表示ツール バー、 通知を作成することが可能になり、ユーザーが開発者の Web サイトを新しい方法で楽しむことができます(ピン留めサイトは Windows 7 タスク バーでのみサポートされています)。

タスク バーへのサイトの固定

ユーザーは次のいずれかの方法で、サイトをタスク バーに固定できます。

  • タブをクリックしてタスク バーにドロップすることで、タブを “切り離す”
  • お気に入りアイコンをアドレス バーからタスク バーにドラッグする
  • "msPinSite" クラス (ドラッグして固定できる画像) を使用して、タスク バーにカスタム画像をドラッグします

サイトが固定されると、サイトはカスタム拡張機能でレンダリングされます。たとえば、[戻る] ボタンと [進む] ボタンは Web サイトの配色と一致します。サイトも [スタート] メニューに固定できます。

ジャンプ リスト

ジャンプ リスト タスクは、固定した Web サイトに合わせて調整された、アプリケーション固有のアクションです。この機能は Windows 7 のアプリケーションに対して用意されたものと同じ機能に基づいています。ジャンプ リスト タスクを使用すると、Web サイトで最も頻繁に使用されるコマンドをユーザーに対して表示できます。ジャンプ リスト タスクは、Web サイトの機能およびユーザーが実行すると予期されるキー操作の両方に基づいて定義できます。タスクにより、Internet Explorer が実行中でない場合でも、ユーザーはいつでも一連の静的なリンクにアクセスできます。ジャンプ リスト タスクの詳細については、MSDN の「 動的ジャンプ リストの作成方法」を参照してください。

縮小表示ツール バー

縮小表示ツール バーとは、基本的に Web サイトの「リモート コントロール」のようなものです。ピン留めサイトのタスク バー ボタンにマウス カーソルを移動すると、縮小表示プレビューの下にツール バーが表示されます。この機能はビデオやオーディオの再生を実装しているサイトでは特に便利ですが、さまざまな使い方が考えられます。再生の制御、お気に入りの追加と削除、検索、オンライン ステータスの変更、即時購入手続き、Web ページの評価のためのコントロールなどを縮小表示ツール バー ボタンにすることができます。縮小表示 ツール バーの作成方法の詳細については、MSDN の「 縮小表示 ツール バーの作成方法」を参照してください。

通知

Windows 7 のアプリケーションのように、ピン留めサイトのタスク バー ボタンの上にオーバーレイ アイコンを表示することで、ピン留めサイトは通知と状態を使ってユーザーとやりとりできます。オーバーレイ アイコンは、ブラウザー ウィンドウが最小化されている場合や別のウィンドウに遮られている場合など、ピン留めサイトのウィンドウが見えなくなっている場合にも Web サイトに注意を引くことができます。オーバーレイ アイコンを使用すると、ネットワークの状態、オンラインの状態、または新しいメールの受信といった、重要な状態の情報または通知を提供できます。通知の詳細については、MSDN の「 通知の提供方法」を参照してください。

ピン留めサイトの発見

Internet Explorer 9 は、サイトが固定可能かどうかをユーザーに通知しません。これらの機能をユーザーに知らせるかどうかは、開発者次第です。ユーザーに Web サイトのピン留めサイト機能を知らせるには、フライ イン、ドロップダウン、バナー、div の効果、ドラッグして固定できるアイコンと画像、およびユーザーがサイトを初めて固定したときにピン留めサイト機能を通知する最初の実行エクスペリエンスなどのさまざまな方法があります。ピン留めサイトの見つけやすさの詳細については、MSDN の「 ピン留めサイトの機能を見つけやすくする方法 」を参照してください。

ピン留めサイトの How-To 情報とコードのサンプルについては、「 ピン留めサイト (MSDN Developer Center)」を参照してください。

ピン留めサイトのデモについては、 Internet Explorer 9 Test Drive サイトを参照してください。

プラットフォーム バージョニング

Internet Explorer 8 では、Microsoft Internet Explorer 6 で導入された互換モードの拡張である、ドキュメント互換モードが導入されました。ドキュメント モードを使用することにより、Internet Explorer が Web ページを使用するのに使用する特定レンダリング モードを選択できます。ドキュメント モードの詳細については、MSDN の「 ドキュメント互換性の定義」を参照してください。

新しいドキュメント モード

Internet Explorer 9 では、新しいドキュメント モードである Internet Explorer 9 標準モードが追加されます。このモードでは、最高速のパフォーマンスが得られ、最新の Web アプリケーションの要求を処理するためにスケーリングが行われ、さらに最新の標準規格が実装されます。

Internet Explorer 9 は、ページや Web サーバーで特に指定がない限り、既定で IE9 標準モードで実行されます。

Internet Explorer 9 で、ページが最新のドキュメント モードでレンダリングされるようにする最適の方法は、標準の !DOCTYPE ディレクティブを使用し、X-UA-Compatible meta タグまたは HTTP ヘッダーを使用しないことです。IE9 標準モードに設定するための !DOCTYPE は次のとおりです。

<!DOCTYPE html>

もちろん、!DOCTYPE および X-UA-Compatible meta タグまたは HTTP ヘッダーを使用して、既定値を好きなように変更することもできます。

現在のドキュメント モードを判断するには、F12 を押して Internet Explorer F12 開発者ツールを開いて、メニュー バーの右側を確認します。ドキュメント モードを上書きするには、[ドキュメント モード] メニューで、[Internet Explorer 9 標準] をクリックします。

ユーザー エージェント (UA) 文字列

ユーザー エージェント (UA) 文字列は、ホスト サーバーにブラウザーを通知して、特定のシステムの詳細を提供します。(UA 文字列の詳細については、MSDN の「 ユーザー エージェント文字列を理解する」を参照してください)。Internet Explorer 9 は、既定で短い UA 文字列を送信する従来のバージョンの Internet Explorer とは異なります。この変更により、全体的なパフォーマンス、相互運用性、および互換性が改善されます。Internet Explorer 9 では、ユーザーのコンピューター上にインストールされている .NET などのソフトウェアが追加した UA 文字列は送信されません。

Internet Explorer 9 は、新しい Internet Explorer 9 UA 文字列を送信します。Internet Explorer 8 の UA 文字列に対する変更のうち、開発者が注意を払う必要がある変更は 4 種類です。

  1. アプリケーション バージョンが、その他のブラウザーと合わせるために、“Mozilla/4.0” から “Mozilla/5.0” にまで上がりました。この変更は、Internet Explorer 9 が相互運用可能なブラウザーであることを意味します。
  2. バージョン トークンが “MSIE 8.0” から “MSIE 9.0” にまで上がりました。
  3. トライデント トークンが “Trident/4.0” から “Trident/5.0” にまで上がりました。
  4. Internet Explorer 9 は、以下の短い UA 文字列を送信します。コンピューターにインストールされているその他のソフトウェアによって作成された追加文字列は送信しません。

Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0)

Internet Explorer 9 での互換表示は、Internet Explorer 8 と同様に IE7 標準モードにマップされます(互換表示詳細については、MSDN の「 互換表示一覧について」を参照してください)。互換表示では、Internet Explorer 9 は以下の UA 文字列を送信します:

Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0; Trident/5.0)

Internet Explorer 9 の新しい UA 文字列の詳細については、Internet Explorer チーム ブログの投稿「 IE9 のユーザー エージェント文字列の概要」を参照してください。

F12 開発者ツール

Internet Explorer 9 で F12 開発者ツールにアクセスするには、F12 キーを押すか、[ツール] メニューで [F12 開発者ツール] をクリックします。Internet Explorer 8 で開発者ツールを使用していた場合、機能強化とパフォーマンスの改善にすぐにお気づきになると思います。

[コンソール] タブ

Internet Explorer 9 の F12 開発者ツールでは、スクリプト イベントを表示するための [コンソール] タブが導入されています。スクリプトを調べると、[エラー]、[警告]、および [メッセージ] のトグル ボタンが表示されます。各ボタンには、各種類のメッセージ数が表示されます。

[ネットワーク] タブ

Internet Explorer 9 では、開発者ツールにネットワーク調査ツールが追加されます。このツールにアクセスするには、[ネットワーク] タブをクリックします。このツールで、以下の作業を実行できます:

  • HTTP と HTTPS ネットワーク トラフィックのキャプチャ。
  • キャプチャされた要求と応答の内容の表示 (と保存)。
  • Cookie、サイズ、タイミング、およびキャッシュ情報などの、キャプチャされたデータに関する詳細情報の表示。

ユーザーエージェント スイッチャー ツール

新しいユーザー エージェント (UA) スイッチャー ツールを使用することで、Web サーバーにブラウザーの種類とバージョンを通知する UA 文字列を変更できます(Internet Explorer 9 の新しい UA 文字列の詳細については、このドキュメントの「ユーザー エージェント (UA) 文字列」を参照してください)。選択した UA 文字列は、各要求にヘッダーとしてネットワーク経由で送信されます。ブラウザーの UA 文字列を変更するには、開発者ツールの [ツール] メニューから [ユーザー エージェント文字列の変更] をポイントして、送信する UA 文字列のブラウザーを選択します。

実際のパフォーマンスの測定

Internet Explorer 9 の F12 開発者ツールを使用することで、従来のバージョンの Internet Explorer と比較して、Web サイトのパフォーマンスのさらに多くの側面を測定できるようになりました。ただし、ユーザーが実際に経験するパフォーマンスを測定することはできません。この問題を解決するため、一部のサイトでは独自のライブラリを開発し、Web ページ上の実際のパフォーマンスを測定しようとしていますが、この処理により、ユーザーに表示されるページが実際に遅くなるオーバーヘッドをまねくことがあります。マイクロソフトでは、W3C WebTiming 仕様 (本稿執筆時点では "作業草案" 段階) が、この問題を確実に解決するための優れた概念基盤であると確信しています。Internet Explorer 9 で WebTiming 機能にアクセスするには、DOM の window.msPerformance インターフェイスを使用します。開発者は F12 開発者ツールでスクリプトのデバッグを有効にしてから、window.msPerformance オブジェクトにアクセスできます。

実際に使用されている window.msPerformance オブジェクトのデモを確認するには、 Internet Explorer Test Drive サイトにアクセスしてください。

改訂履歴

2010 年 3 月 16 日: Internet Explorer Platform Preview 向けに作成。

2010 年 4 月 15 日: 次の情報について更新:

  • CSS3 名前空間モジュール サポート
  • 追加の CSS3 セレクター サポート
  • 追加の DOM サポートの詳細
  • 追加の SVG サポートの詳細 (組み込みの制限含む)
  • ICC カラー プロファイルのサポート

2010 年 5 月 5 日: Internet Explorer Platform Preview Build 2 向けに次の情報について更新:

  • 追加の DOM サポートの詳細
  • 新しい DOM 機能:
    • 新しい DOM Core API
    • DOM HTML
    • DOM Traversal
    • 新しい DOM L3 イベント:
      • DOMAttrModified イベント
      • DOMContentLoaded イベント
      • 合成イベント
  • 新しいユーザー エージェント (UA) 文字列
  • データ URI の変更
  • 開発者ツールの追加:[コンソール] タブと UA スイッチャー ツール

2010 年 6 月 23 日: Internet Explorer Platform Preview Build 3 向けに次の情報について更新:

  • 新しい CSS3 機能:
    • 新しい背景と境界機能
    • HSL および HSLA カラー モデル
    • CSS3 フォント サポート
    • CSS3 値と単位モジュール サポート
    • 新しい display プロパティ値
  • 新しい DOM Element Traversal サポート
  • 新しい HTML5 機能:
    • video、audio、および canvas 要素
    • Selection インターフェイス
  • 新しいセレクター API レベル 2 サポート:
    • matchesSelector メソッド
  • 新しい SVG 機能:
    • クリッピング、マスク、および合成
    • グラデーションおよびパターン
    • 相互作用性
    • リンクと表示
    • ペイントとカラー
    • テキスト

2010 年 8 月 4 日: Internet Explorer Platform Preview Build 4 向けに次の情報について更新:

  • 新しい JavaScript エンジン "Chakra"
  • 強化された DOM 機能
  • WebIDL 仕様の新しいサポート
  • window.msPerformance オブジェクト
  • canvas セクションの肉付け (例へのリンクを付加)

2010 年 9 月 15 日: Internet Explorer 9 Beta 向けに次の新しいリンクと情報について更新:

  • DOMParser と XMLSerializer
  • ピン留めサイト

2010 年 10 月 28 日: Internet Explorer Platform Preview Build 6 向けに次の情報について更新:

  • CSS 2D Transforms
  • HTML5 セマンティック要素
  • サポートされる ICC カラー プロファイルのバージョン番号の訂正

2011 年 2 月 10 日: Internet Explorer Release Candidate 向けに次の情報について更新:

  • HTML5 の Geolocation
  • ピン留めサイト (æ›´æ–°)
  • 互換性モード (æ›´æ–°)
  • その他さまざまな文書の修正

2011 年 2 月 18 日: 次の追加情報について更新:

  • ピン留めサイト
  • HTML5 Canvas

2011 年 3 月 14 日: Internet Explorer 9 (RTW) 向けに更新:

  • テキストの更新版
  • ECMAScript 5 (リンクの追加)

ページのトップへ

評価してください:Â