IE10 で採用された標準準拠 Web グラフィックス
本記事は、マイクロソフト本社の IE チームのブログ から記事を抜粋し、翻訳したものです。
【元記事】Moving to Standards-based Web Graphics in IE10 2011/12/8 8:05 AM
ユーザーは、インターネット上のあらゆるサイトにどのブラウザーでアクセスしても同じユーザー エクスペリエンスが得られることを期待しています。
最初の IE9 Platform Preview のリリースを告知した 2010 年 3 月 16 日の記事で、異なるブラウザーでも "同じマークアップで同じ表示結果” を実現するという目標達成に向けた Internet Explorer の取り組みについて初めて紹介しました。IE9 により私たちはこの目標に向けて大きく前進し、IE10 の HTML5 ベースの標準モードおよび互換モードでは、これをおおむね達成しています。
「IE10 の HTML5 解析」という記事では、IE10 の HTML5 ベースの標準モードおよび互換モードから削除されたレガシ機能をいくつか紹介しています。
この記事では、さらに Vector Markup Language (VML) と DirectX ベースのフィルター/トランジションという 2 つの削除されたレガシ機能について説明します。
MSDN ドキュメントを見ると、これらの機能は共に IE9 の時点で非推奨になっており (「Filters and Transitions ( フィルターとトランジション) 」の最初の文に、“This topic documents a feature of Visual Filters and Transitions, which is deprecated as of Windows Internet Explorer 9 (このトピックでは、Windows Internet Explorer 9 で非推奨となったビジュアル フィルターおよびトランジション機能について説明します)” と記されています)、IE10 では標準モードおよび互換モードから削除されました。
VML や DX フィルターの一般的な使用法は、IE10 など最新版ブラウザーに実装された標準準拠の機能でも実行できるようになっています。これらのレガシ機能は、IE10 のドキュメント モード 5、7、8、および 9 で使用できますが、パフォーマンスはハードウェア アクセラレーションに対応した標準準拠の機能に劣ります。
Web 開発者の方には、サイトで旧バージョンのドキュメント モードを使用するよりも、標準準拠テクノロジを採用することを推奨します。
VML ではなく SVG を使用する
マイクロソフト他が VML (Vector Markup Language) を W3C に提案したのは 1998 年のことでした。VML は IE5 で初めて実装されました。W3C が VML をその対抗案と統合した結果誕生したのが SVG です (簡単な経緯については、ウィキペディアの Vector Markup Language の項目 ( 英語 ) を参照してください)。
IE9 で実装された SVG は、Web サイトや Web アプリケーションにおいて VML に代わる機能を提供します。Microsoft ダウンロード センターでは、VML から SVG への移行手順を説明する VML to SVG Migration Guide (VML から SVG への移行ガイド) を提供しています。
Raphaël JavaScript Library は簡単に使用できる軽量なグラフィックス API で、SVG が使用可能な場合は SVG を、使用不可能な場合は VML を使用します。Raphaël は、IE8 以降のブラウザーで動作するベクター グラフィックス ソリューションの構築に最適です。
DX フィルターではなく CSS3 を使用する
Internet Explorer 4 で導入されたビジュアルフィルターとトランジションにより、Web 開発者は Web ページにマルチメディア風の効果を適用できるようになりました。DX フィルターという名前は、基盤テクノロジである DirectX と、フィルターを指定する長い形式の構文 (例: “filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50)”) に由来しています。DX フィルターと SVG のフィルター効果は異なるものですが、共に CSS プロパティ filter を使用します。
opacity、gradient、および shadow といった特に人気の高い効果は、CSS3 のワーキング ドラフトまたは勧告候補となっています。IE10 はこれらの CSS3 仕様をサポートしており、従来の IE 専用のフィルターは不要になっています。もう 1 つのフィルター AlphaImageLoader は、IE6 の透過 PNG に関するバグの回避策としてよく使用されていましたが、これらのバグは IE7 で修正されています。
最も頻繁に使用される DX フィルターとそれらに代わる標準準拠機能を次表にまとめています。
DX フィルター |
標準準拠の代替機能 |
Alpha |
Opacity |
AlphaImageLoader |
<img> または background-image と関連プロパティ |
Gradient |
background-image: linear-gradient() |
DropShadow |
text-shadow または box-shadow |
Matrix |
Transform、transform-origin |
いくつかのより特殊なフィルターに関しては、IE10 の SVG フィルター効果を使用して、SVG で実装することができます。
メモ : IE9 のドキュメント モードは DX フィルターとそれらの代替となる標準準拠機能の両方をサポートしていますが、同一要素に対して両方のプロパティを指定するのは避けたほうがよいでしょう。Modernizr などのライブラリを使用すると、簡単に CSS で機能検出を使用して、宣言が重複しないようにすることができます。
同一のマークアップに移行する
以上、説明してきた変更点は、IE10 Platform Preview 4 で実装され、現在は Windows Developer Preview で提供されています。
IE10 は、過去のバージョンに類を見ないほど、”他の普及しているブラウザーと同じマークアップとコードで動作する” 点が強化されています (ただし CSS のベンダー固有プレフィックスに “-ms-” を追加する必要があります)。また、2 つのレガシ機能の廃止は、IE10 向けに開発したコンテンツが他のブラウザーにも対応することを意味しています。
同じ標準に準拠したコンテンツがすべてのブラウザーで表示できるようになることは、ユーザーにとって朗報に違いありません。
—Ted Johnson、Internet Explorer グラフィックス、リード プログラマー マネージャー