IE10 Release Preview で安定した Web を進化させる

  • Article

Windows 8 Release Preview の計画の一部として、私たちは、IE10 によりサポートされるすべての W3C ドラフト標準を確認しました。特に、これらの仕様が次のとおりであることを期待していました。

  • 安定している。つまり、最近加えられた追加点や変更点がなく、名前変更や大幅な変更がないと予想される。
  • IE10 以外の少なくとも 2 つのブラウザーによりサポートされる。
  • 機能の主な使用事例において、それらのすべてのブラウザー間で相互運用可能である。
  • プレフィックスのない形式を含めて既に Web で使用されている。
  • Windows 8 Consumer Preview 以降 Candidate Recommendation になったか、2012 年中に Candidate Recommendations となる可能性が高い。

以下の W3C ドラフト標準機能は、これらの基準を満たしているため、IE10 ではプレフィックスのある形式のこれらの機能がサポートされます。

Windows 8 Consumer Preview を使って開発されたサイトやアプリとの互換性を確保するため、IE10 では Microsoft ベンダー プレフィックス (‑ms‑/ms) を使ったベンダー プレフィックス付きの形式でもこれらの標準がサポートされています。

IE10 では、ベンダー プレフィックスが付いた形式の次の W3C ドラフト標準もサポートされます。これらのドラフトは、現時点で上のリストの条件を満たしていないと思われます。

試験版から安定版へ

Web ブラウザーで新しい標準が実装されている場合、独自のベンダー プレフィックスでその新機能をマークすることでその標準が実装されます。プレフィックス ‑moz‑ が付いたスタイル プロパティは Mozilla Firefox の試験的 CSS 機能を意味しており、‑ms‑ は Microsoft Internet Explorer の試験的 CSS 機能、‑o‑ は Opera の試験的 CSS 機能、‑webkit‑ は WebKit ベースのブラウザー (Google Chrome や Apple Safari など) の試験的 CSS 機能を意味しています。それに相当する機能のオブジェクト モデルにも同じようにプレフィックスが付いています。

window.requestAnimationFrame() などの新しいプラットフォーム API も同様に、現在のところ window.mozRequestAnimationFrame()、window.webkitRequestAnimationFrame()、または window.msRequestAnimationFrame() として呼び出されています。

ブラウザー ベンダーは通常、対応する仕様が Candidate Recommendation 段階になるとそのプレフィックスを削除します。この命名規則には、たくさんの目的があります。たとえば、次のとおりです。

  • 仕様が進化できるようにする: プレフィックスがないと、初期実装向けに記述された Web コンテンツによって編集者に制約が生じたり、役に立つ追加や変更が難しくなったり、不可能になったりすることがあります。
  • 試験的な実装を分離する: 特定のブラウザーのドラフト バージョンのバグまたは選択によって、他のブラウザーに影響が及ぶことがありません。
  • スタイル シートのドキュメント化: スタイル シートのベンダー固有の従属要素が明示的にドキュメント化されます。

標準によっては、ベンダー プレフィックスにまったく依存しないことがあります。たとえば、ブラウザー ベンダーは、HTML5 仕様により導入された新しい HTML 要素 (<canvas> や <video> など) にはプレフィックスを付けませんでした。

Web のベスト プラクティス

実際に、複数のブラウザーにより、相互運用可能な方法で同じドラフト機能がサポートされることがあります。この結果、Web 開発者は次のような宣言を記述するようになります。

-webkit-transform: rotate(30deg);

-moz-transform: rotate(30deg);

-ms-transform: rotate(30deg);

-o-transform: rotate(30deg);

このパターンを何回もコピーして貼り付けるうちに、多くの開発者は今度の W3C 標準には現在の Web との下位互換性があると見なすようになります。その後、開発者はプレフィックスのないバージョンのプロパティを追加してスタイル シートの "将来を保証" します。

-webkit-transform: rotate(30deg);

-moz-transform: rotate(30deg);

-ms-transform: rotate(30deg);

-o-transform: rotate(30deg);

transform: rotate(30deg);

Web 開発者の視点からすると、上の宣言セットは、プレフィックスのない CSS 変換をサポートする将来のブラウザーに対応するようになりました。

過去の標準機能は、実際にこの実用的な仮定によって検証されてきました。IE9 の最初の Platform Preview でプレフィックスのない border-radius プロパティのサポートが追加されたとき、将来が保証されたスタイル シートが既に展開されているため、多くのサイト間でこの機能が "ライトアップ" されたのを見ました。

今、たくさんの機能が同じ進化の過程を通っています。多くの CSS 遷移デモ ページが既に将来を保証されているだけでなく (Paul Hayes の視差効果 (英語) や Lea Verou のアニメーション可能なギャラリー (英語) をご覧ください)、Google の html5slides (英語)、設計者のホーム ページ (英語)、サイト ロゴ (英語)、チュートリアル (英語) などのオープン ソース プロジェクトでも頻繁にプレフィックスのない transition 宣言が追加されています。

多くの遷移効果によって、CSS 変換のチュートリアル (英語) が進化します。このチュートリアルでも、プレフィックスのない transform プロパティが頻繁に宣言されています。

仕様の完成

Web 開発者が新しいマークアップでのブラウザーの収束を期待しているのに対して、標準化プロセスははるかに保守的です。border-radius は何千もの Web サイトで十分相互運用可能な方法で機能しますが、CSS ワーキング グループのメンバーは、幅と色が変化する隣接した 2 つの境界線間の丸みを帯びた角の外観など、複雑なケースのレンダリングを定義するのに忙しくしていました。同様に、CSS 遷移 (英語)、アニメーション (英語)、変換 (英語) の編集者は、エラー条件の指定 (英語)、エラーの修正 (英語)、または一般的でないシナリオの明確化 (英語) を行っています。

高いレベルの相互運用性を確保して Recommendation ステータスになるには、これらの問題を解決する必要がありますが、現在のコンテンツと将来のコンテンツに影響を与えるものは多くありません。仕様が安定して相互運用可能になったら、前の角のケースの利用を Web で控えるべきではありません。これは、新しい HTML5 要素や CSS2.1 仕様のしあげには必要なかったため、どちらにもプレフィックスが必要ありませんでした。

完全なパブリック テスト スイートによって実証された強固な仕様は重要ですが、Candidate Recommendation が公開されるまで同じ宣言を複数回繰り返すことをすべての Web 開発者に要求するため、コンテンツの安定性より仕様の完全性の方が優先順位が高くなります。

仕様の完成は、時間のかかる作業です。いくつかの例を挙げると、2008 年に登場した (英語) CSS グラデーション、2009 年の相互運用可能なソリューションを指定する作業ドラフト初版 (英語)、2012 年 4 月に公開された Candidate Recommendation (英語) などがそうです。その間に、標準化された構文は、多くの Web サイトに展開されたプレフィックス付き構文と互換性がなくなりました。IE10 Release Preview は、最新仕様の最初のプレフィックスなし公開実装です (IE10 では、‑ms‑ ベンダー プレフィックスが付いた相互運用性の高いプレフィックス バージョンもサポートされます)。

コードにおける意味

CSS グラデーション

広い範囲で相互運用可能ですが、最近のすべてのブラウザーによりサポートされるプレフィックス付きのグラデーション構文には、仕様の古いドラフト バージョンが反映されるようになりました。この以前の構文は、最新の Candidate Recommendation と互換性がありません。たとえば、次のグラデーションを宣言したとします。

background: -ms-linear-gradient(left, yellow, red);

この場合、‑ms‑ プレフィックスを削除するだけで、プレフィックスなしの宣言となるわけではありません。IE10 のプレフィックスのない線形グラデーション機能は最新の仕様に従っているため、次のようになります。

background: linear-gradient(to right, yellow, red);

IE10 での CSS グラデーションのサポートについては今後のブログ記事で詳しく扱う予定です。

カスケードと CSS オブジェクト モデル

カスケードにより、プレフィックスの付いた CSS プロパティが予想どおりに解決されます。次のルールが適用されます (プレフィックスのない宣言では回転角度が大きくなる点に注目してください)。

-ms-transform: rotate(30deg);

transform: rotate(60deg);

要素は 60 度回転します。2 つのプロパティは、互いにエイリアスとして扱われ、下の宣言が優先されます。対応する CSSOM プロパティもエイリアスです。transform スタイル プロパティと msTransform スタイル プロパティの計算値を要求した場合、どちらにも優先される 60 度の変形が反映されます。

同様に、element.style.transform を設定すると element.style.msTransform も設定され、その逆も同じです。

プロパティ名のシリアル化

transition-property などのプロパティは、CSS プロパティ名のリストを取得します。たとえば、IE10 Consumer Preview で transform プロパティが 2 秒間で遷移するように指定する場合、開発者は次のように記述します。

-ms-transition-property: -ms-transform;

-ms-transition-duration: 2s;

IE10 Release Preview は、style.msTransitionProperty と style.transitionProperty の両方の値を "transform" としてシリアル化します。元のプレフィックスは保持されない点に注意してください。

これは、遷移イベントの propertyName プロパティにも当てはまります。

アニメーションと遷移のイベント タイプ名

IE10 Release Preview では、プレフィックスの付いた名前とプレフィックスのない名前のどちらを使っても、アニメーションと遷移のイベント リスナーを登録できます。つまり、次の 2 つは同じです。

element.addEventListener("MSTransitionEnd", myHandler, false);

element.addEventListener("transitionend", myHandler, false);

ただし、IE10 Release Preview ではイベント オブジェクトの type プロパティとして常にプレフィックスのない名前が返されます。

今後の予定

私たちは、プレフィックスなしで IE10 がサポートするようになったすべての機能の新しいテスト ケースを W3C に提出します。ワーキング グループのメンバーおよび共同編集者として、私たちは同僚と協力してこれらの仕様を Candidate Recommendation まで進めます。

これらの機能とそのクロス ブラウザー互換性のサポートに関するフィードバックをお待ちしております。

— Internet Explorer 担当グループ プログラム マネージャー Sylvain Galineau