Internet Explorer 9：最も包括的な開発者ガイド（およびその他）、パート4

IE9 PP3のキャンバスとビデオのほかに新しいものは何ですか？ 膨大な説明、たくさんの写真。







6月23日、厳密にスケジュール（期間8週間）に従って、IE9の3番目のテストアセンブリがリリースされました。 Habréについては、すでにこのリリースについて、そしてイノベーションを説明する最も一般的な言葉でなんとか書いています。 その上、HabréでIE9とChromeのキャンバスのパフォーマンスを比較することができました 。



この投稿では、Internet Explorer 9の3番目のテストバージョンの詳細を明らかにし、開発者にとって重要なブラウザーの革新について説明します。



これは、開発者向けのIE9の革新に関する一連の記事の4番目の記事です。 ここで以前のパーツを理解することができます： パート1（CSS3、HTML5、DOM） 、 パート2（SVG、GPU） 、 パート3（ICCプロファイル、画像フォーマット、JavaScript） 。

HTML5 / CSS3 / DOM / SVG / XHTML

IE9 Platform Preview 3では、次の要素が更新または実装されています。これらの要素は、以前のバージョンでは完全に実装されていなかったか、まったく存在していませんでした。

HTML5

• HTML5ルール（HTML5準拠の空白処理）に基づいた空き領域処理。

CSS3

• CSS3 値と単位の完全サポート
  
  
  • deg：度（角度単位）
  • grad：grads（角度単位）
  • rad：ラジアン（角度単位）
  • ターン：ターン（角度単位）
  • ms：ミリ秒（時間単位）
  • s：秒（時間単位）
  • rem：ルート要素のフォントサイズ（相対長さ単位）
  • vw：ビューポートの幅（相対的な長さの単位）
  • vh：ビューポートの高さ（相対的な長さの単位）
  • vm：ビューポートの幅または高さの小さい方（相対的な長さの単位）
  • ch：ゼロ幅（レンダリングフォントのゼログリフの幅、相対的な長さの単位
  • CSS要素の値を計算できるcalc（）プロパティを追加しました。
• CSS3名前空間モジュールの完全サポート
• CSS3 Background＆Bordersモジュールの完全サポート、さらに複数の背景を含む背景としてのSVGコードのサポート。
• CSS3フォントのサポート：TrueType、OpenType、Open Font Formatが@ font-faceに含まれています。 CSS3 Fontsプロパティは実装されていませんが、font-size-adjustとその他のプロパティがあります。

さらに、カラーモデルHSLおよびHSLAのサポートが実装されています。

ドム

• DOM L2 / L3イベントの完全サポート。
• DOMスタイルの完全サポート。
• DOMコアに関数とプロパティが追加されました：acceptNode、compareDocumentPosition、CDATASection、importNode、inputEncoding、isDefaultNamespace、isEqualNode、isSameNode、isSupported、lookupNamespaceURI、lookupPrefix、replaceWholeText、textContent、xmlEncalite、xmlEncal、xmlEmlcand、wholemlml

Svg

• 実装された要素：グラデーション、パターン、マスキング、クリッピング、マーカー、リンクおよびビュー。
• <embed>、<iframe>、<img>にSVGを埋め込む;
• リモートサーバーからの.SVGZファイルのサポート。
• SVG操作サポートテキスト：塗りつぶし、ストローク、配置（x、y、dx、dy、rotate）。

IE9のSVGの新しい機能は、勾配など、多くの興味深いものを追加します。

XHTML / XSLTおよびドキュメント「text / xml」、「application / xml」

• XMLドキュメントはSVGおよびXHTMLコンテンツを表示します。
• XMLエンジンがMSXML3からMSXML6に更新されました。
• XSLTは、SVGおよびXHTMLドキュメントに適用できます。

デモンストレーション

開発者は、CSS3およびDOMの変更のデモをいくつか追加しました。

IEロゴ

境界半径要素のみに基づいて構築されるアニメーションIEロゴ。







悲しいかな、Opera 10.6 Betaは、CSS3プロパティの実装のバグが原因で、ロゴが正しく表示されず、アニメーションが引き裂かれてぴくぴくします。

DOMトラバーサルギャラリー

このデモンストレーションは、DOM要素をフィルタリングするためのDOM Traversalメカニズムの可能性を示しています。

ACID3

IE9 PP3は、100のうち83ポイントのACID3テストに合格しました。以前のテストバージョンは、それぞれ55ポイントと68ポイントを獲得しました。 進歩は明らかです。

Webフォント

IE9 Platform Preview 3は、WOFF、TrueType、およびOpenType埋め込みフォントのサポートを追加します。 EOT標準もサポートされています。



私の意見では、埋め込みフォントのサポートを実装することは非常に重要なステップです。 繰り返しになりますが、IE9はGPUレンダリングとフォントスムージングのサポートに優れています。 以下は、さまざまなブラウザーでのWOFFレンダリングの例です。







開発者は、フォントが埋め込まれた優れたテストページを用意しました。このページでは、誰でもブラウザーがWebフォント標準をサポートし、レンダリングする方法を試すことができます。

ECMAScript 5とJavaScriptのパフォーマンス

新しいテストバージョンでは、IE9によってJavaScriptのパフォーマンスが再び向上しました。







IE9の更新されたバージョンには、ECMAScript 5標準のサポートの大規模な更新が含まれており、次のリストに新しい要素が示されています。

• オブジェクトの場合：
  
  
  • Object.defineProperty、Object.defineProperties、Object.create、Object.getPrototypeOf、Object.getOwnPropertyDescriptor、Object.getOwnPropertyDescriptor、Object.keys、Object.seal、Object.freeze、Object.isSealed、Object.isFrozen、Object.preventExtensions。 isExtensible;
• 配列の場合：
  
  
  • indexOf、lastIndexOf、forEach、every、some、map、filter、reduce、reduceRight;
• その他の便利な方法：
  
  
  • String.prototype.trim、Date.prototype.toISOString、Date.parse、Date.now、Array.isArray、Function.prototype.bind

さらに、イベントバインディングは、「::」コンストラクトによって部分的に実装されます。



開発者は、ECMAScript 5の新機能のデモをいくつか追加しました。

• ECMAScript 5配列 -新しい配列APIを使用します。
• ECMAScript 5ゲーム -伝説の宝石をちりばめたものに似た、さまざまなECMAScript API上に構築されたゲーム。

ECMAScript 5の実装に関しては、Internet Explorer 9が主要な位置を占めています。 テストでは次の結果が示されます。







多くの人は、これらのテストがMicrosoft自身によってW3Cに送信されたという事実に満足しておらず、おそらくリンクをたどって自分でテストを検証するのが面倒なので、ソースマテリアルはすべての人が利用できます。



それでも、「独立した」意見が必要な場合は、IE9ブラウザーによるECMAScript 5標準のオブジェクトの完全なサポートを示す独立テストをチェックしてください。

window.msPerformance

Internet Explorer 9の開発者は、 W3C Web Timing仕様の一部である3番目のテストバージョンにPerfomance APIのサポートを追加しました。 このツールを使用すると、テスト負荷をかけてWebサイトをテストできます。 APIは時間の経過とともに変化する可能性があるため、現時点では接頭辞「ms」が付いています。 このAPIの動作は特別なページで見ることができます 。

HTML5ビデオ/オーディオ

IE9 PP3の最も期待される新機能は、HTML5ビデオです。 それについては、キャンバスとは異なり、事前に知られていました。 IE9でのビデオの使用はMIX会議中に示されましたが、最初のテストバージョンでも2番目のテストバージョンでもサポートはありませんでした。



IE9の3番目のバージョンはHTML5 Videoのサポートをもたらし、もちろん、ビデオの再生はGPUを介して加速されます（ただし、これまではVistaではなくWindows 7でのみ）。



現在、H.264コーデックを使用したビデオ再生のサポートを実装しています。 WebMサポートは、おそらく8月に予定されているIE9の最初のベータバージョンで実装される予定です。



ビデオタグに加えて、オーディオタグのサポートが追加されました。 このタグでは、MP3およびAACコーデックがサポートされています。 開発者は既知のバグについて警告します。WindowsVistaでは、LAMEを使用してエンコードされたMP3ファイルが正しく再生されない場合があります。



開発者は、いくつかの興味深いデモを準備しました。

IMDbビデオパノラマ

IMDB.comのサポートにより、人気のある公開および予想される映画の予告編が多数公開されています。 FPSメーターには、ブラウザーのパフォーマンスが表示されます。

HTML5オーディオXMLプレイリスト

オーディオタグを示すために、開発者はリストとホットキーを備えた音楽プレーヤーを準備しました。

キャンバス

このIE9リリースの大きな驚きは、 HTML5 Canvasのサポートでした。 canvasのサポートの噂はかつてインターネットに漏れましたが、確認はありませんでした。



IE9 PP3は、Canvas Element APIとCanvas 2D Context APIのほとんどを完全にサポートしています。 キャンバスでの作業はGPUによって完全に加速され、これはデモで顕著です。



以下は、キャンバスIE9で完全に実装されていないもののリストです。

• globalCompositeOperation属性のサポートはありません。
• Canvas 2D Context DOM例外はサポートされていません。
• drawFocusRing（）およびフォーカス管理APIのサポートはありません。

開発者は、canvasの使用に関する多くの美しくて興味深いデモンストレーションを準備しました。 それらを考慮してください：

アマゾン棚

Amazonのベストセラー本のカタログを操作します;本を選択すると、本に近づき、スクロールできます。 IE9では、FPS = 60ですべての操作が即座に発生します。

フィッシータンク

すでに有名になったデモ。 彼女は多くのサイトで引用され、多くのコマーシャルで紹介されています。 水族館では、魚が泳ぎ、その数を増やすことができます。 上記は1000匹の魚のスクリーンショットです。魚は非常によく泳ぎます。 Opera 10.6 Betaでは、これらの条件下で-2 FPS。 Chrome 6について話す必要はありません。DownloadSquadの独立したテストでビデオをご覧ください 。

ミスター ポテトガン

高速のChromeとジャガイモのビデオを覚えていますか？ IE9チームは、ポテトテストで応答しました。 試してみてください、このテストではChromeは非常に高速ですか？

小惑星帯

次のテストは、その中のいくつかの衛星を持つ小惑星雲です。 衛星は軌道上を回転し、その数を増やして、これがパフォーマンスにどのように影響するかを確認できます。 IE9は増加にまったく影響しません。

ディープズーム

次のデモは、以前はキャンバスに基づいてAjaxまたはSilverlightのいずれかで機能していたDeepZoomテクノロジーの実装を示しています。







ここにギガピクセルのパノラマがあり、それに沿って自由に近づいて、興味のある詳細を自由に移動できます。

キャンバスパッド

最後のデモは、実装されたキャンバス関数の小さなディレクトリとデモです。 たとえば、スクリーンショットはキャンバス上のアニメーションを示しています。

テスト

IE9開発者は、さまざまな標準の実装パラメーターに関するW3Cの新しい118の新しいテストを作成しました。 さらに、ECMAScript 5実装の別の1309テストが作成されました。これらのテストの現在の状況は次のとおりです。







ご覧のとおり、IE9自体はすべてのテストに合格しているわけではありません。 これらの詳細を知り、 このページで各テストを確認してください 。

開発者ツール

更新されたIE9開発者ツール：

• プロファイルスクリプト、DOM、および組み込み関数の[プロファイラー]タブが返されました。
• [ネットワーク]タブに[イニシエーター]列が表示され、コンテンツのダウンロードの正確な原因が示されます。
• XML解析エラーがツールコンソールに表示されるようになりました。

オプショナル

チャンネル9でさらに利用可能なビデオ：

• Internet Explorer 9プラットフォームプレビュー3：新しいデモを見る
• Internet Explorer 9プラットフォームプレビュー3：ECMAscript 5の概要
• Internet Explorer 9プラットフォームプレビュー3：キャンバスの概要
• Internet Explorer 9プラットフォームプレビュー3：HTML5ビデオサポートの概要
• Internet Explorer 9プラットフォームプレビュー3：CanvasとAmazon.comの概要

Internet Explorer開発者ブログには、革新について説明した素晴らしい投稿があります。



英語の広範なIE9開発者ガイド。

船外

位置情報、Webワーカー、Webソケット、CSS3変換、WebGL、およびその他の標準のようなものはまだIE9に残されており、その多くはまだドラフトの状態から抜け出していません。 IE8ベータ版では、8月にこの一部が表示される可能性があります。 キャンバスの場合のように、驚きを待ちます。

おわりに

ご覧のとおり、IE9の3番目のテストバージョンでは、多くの新しい機能、機能、API、新しい標準が追加されました。



IE9の開発は本格的です。 多くの場所で、IE9は競合他社に追いつき、さらには追い越しさえしました。 ペースが同じままであり、IE9の最終バージョンがさらに改善されることを期待しましょう。