標準ベースの Web グラフィックに移行する IE10
本記事は、マイクロソフト本社の IE チームのブログ から記事を抜粋し、翻訳したものです。
【元記事】Moving to Standards-based Web Graphics in IE102011/12/09 1:05 PM
ユーザーは、どのブラウザーでインターネットのどのサイトを見ても、似たような品質のエクスペリエンスを得られることを期待するものです。ブラウザーを問わず "同じマークアップで同じ結果" を実現する (Same Markup) という目標に対する Internet Explorer での取り組みについて、このブログで初めて話題にしたのは、IE9 Platform Preview 1 のリリースを発表した、2010 年 3 月の記事でのことでした。IE9 によって私たちはこの目標に向けてに大きく前進しましたが、IE10 の HTML5 に基づく標準モードと互換モードは、この取り組みをほぼ完成させるものです。「IE10 の HTML5 解析」では、IE10 の HTML5 ベースの標準モードおよび互換モードで廃止された従来の機能をいくつかご紹介しました。
この記事では、これに加えて 2 つの機能が廃止されたことについてお話しします。Vector Markup Language (VML) と DirectX ベースのフィルターおよびトランジションです。どちらの機能も IE9 以降は MSDN のドキュメンテーションでは非推奨扱いとなっており (たとえば「フィルターおよびトランジション」(英語) の 1 行目には "This topic documents a feature of Visual Filters and Transitions, which is deprecated as of Windows Internet Explorer 9" という記載があります)、IE10 の標準および互換モードでは正式に廃止となります。
VML および DX フィルターの一般的な用途については、IE10 やその他のブラウザーの現行バージョンでは、標準ベースの代替手段が実装されています。IE 固有の古い機能であるこれらは、IE10 ではドキュメント モード 5、7、8、および 9 では引き続き利用できますが、ハードウェア アクセラレーションを使った標準ベースの後継機能と比べると、パフォーマンス面で劣ります。Web 開発者の方は、旧ドキュメント モードに頼るよりも、サイトを標準ベースのテクノロジに移行させることをお勧めします。
VML の代わりに SVG を使う
VML (Vector Markup Language) は Microsoft を含むいくつかの団体によって 1998 年に W3C に提案され、IE5 で��初に実装されました。W3C はその後、競合する別の提案 VML を統合し、結果として SVG が誕生しています (Wikipedia の Vector Markup Language の項に簡単な経緯が記されています)。
IE9 で実装された SVG は、Web サイトやアプリケーションで使用されている VML を置き換えるのに十分な機能を備えています。Microsoft ダウンロード センターで公開されている VML to SVG Migration Guide (英語) で、VML から SVG に移行するためのガイダンスが提供されています。
Raphaël JavaScript Library (英語) は軽量で使いやすいグラフィック API で、利用可能な場合は SVG を、利用できない場合は VML を使用します。IE8 以降の新しいブラウザーで動作するベクター グラフィックを作成する方法として、Raphaël は有効な選択肢と言えるでしょう。
DX フィルターの代わりに CSS3 を使う
Internet Explorer 4 では、Web 開発者が Web ページにマルチメディア型の効果を追加できるよう、視覚的なフィルターとトランジション (英語) のセットが導入されました。DX フィルターという名称は、基盤となっている実装である DirectX と、使用される長いフォーム形式の文法 (例: filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50)) から来ています。DX フィルターは、同じ filter という CSS プロパティ名を称しますが、SVG フィルター効果とは別のものです。
これらの効果の中でも最も人気が高かった、不透明度、グラデーション、シャドウなどは、その後、CSS3 Working Draft や Candidate Recommendation に組み込まれています。IE10 ではこれらの CSS3 仕様をサポートしているため、従来の IE 固有のフィルターは不要になります。このほかに、IE6 に存在した PNG の透過処理のバグを回避する方法として、AlphaImageLoader というフィルターが一時よく使用されていましたが、このバグは 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 に機能検出を組み合わせることができ、宣言の重複を避けることができます。
今すぐ Same Markup への移行を
ここで紹介した変更点は、Windows Developer Preview で利用可能となっている IE10 Platform Preview 4 から有効です。
IE10 は、過去のどのバージョンよりも多くの、他の人気ブラウザーと同じマークアップとコードで動作するようになっています (必要なのは CSS ベンダー プレフィックスを更新して "-ms-" を追加していただくことだけです)。また逆に、2 つの古い機能が廃止されたことによって、IE10 向けに開発されたコンテンツが、他のブラウザーでも正常に動作するようになっています。
すべてのブラウザーが同じ標準ベースのコンテンツを扱うことができれば、ユーザーにとって大きなメリットとなります。
- Internet Explorer グラフィックス担当リード プログラム管理者 Ted Johnson