Internet Explorer 10（IE10）は、CSSの対応範囲が大きく広がった世代のブラウザーです。その中でもWeb制作でよく使われた機能の一つが、画像を用意せずCSSだけで色のグラデーションを描画できるCSS Gradientsです。
IE10のグラデーションについて調べると、古いCSSサンプルには-ms-linear-gradient()が書かれている一方、別の資料ではプレフィックスなしのlinear-gradient()が使われているため、「IE10では-ms-が必要なのか」と迷いやすいところです。
結論からいうと、正式版（RTM）のIE10では、CSSグラデーションをベンダープレフィックスなしの標準構文で利用できます。ただし、IE10正式版より前のプレビュー版や、仕様策定途中の古い構文が混在していることが、現在でも-ms-付きコードを見かける理由です。
IE10正式版はlinear-gradient()をプレフィックスなしで利用できる
IE10正式版では、線形グラデーションをlinear-gradient()として記述できます。Microsoftが2012年に公開したIE10向けのWebサイト移行資料でも、WebKit向けの古いグラデーションからIE10向けへ変更する例として、プレフィックスなしのlinear-gradient(to bottom, ...)が示されています。[参照] Microsoft Windows Developer Blog
例えば、上から下へ白から黒へ変化するグラデーションなら、IE10正式版を対象に次のような標準構文を使用できます。
background: linear-gradient(to bottom, #ffffff, #000000);
つまり「IE10でCSS3 Gradientsがベンダープレフィックスなしで利用可能になったのか」という観点では、正式版IE10では「はい」と考えてよいでしょう。
なぜ「-ms-linear-gradient()」という記述も存在するのか
混乱しやすい理由は、IE10の開発途中ではMicrosoftのベンダープレフィックスである-ms-を付けたグラデーション構文が使われていた時期があるためです。IE10 Consumer Previewなど、正式リリース前の版を対象とした古い記事やCSSジェネレーターでは-ms-linear-gradient()が掲載されていました。
その後、仕様の成熟に合わせてIE10正式版ではプレフィックスなしの実装へ移行しました。そのため、当時のWeb制作資料を検索すると「IE10用」として-ms-linear-gradient()が残っている場合があります。
「IE10」という名前だけで判断するのではなく、プレビュー版についての資料なのか、正式版IE10についての資料なのかを区別することが重要です。
IE10ではグラデーションの構文自体も変化している
ベンダープレフィックスの有無だけでなく、CSS Gradientsは標準化の過程で方向の指定方法なども変化しました。MicrosoftのIE10向け資料でも、CSSグラデーションの構文が標準化の途中で更新されたことが説明されています。[参照] Microsoft
例えば、古いサンプルではlinear-gradient(top, #fff, #000)のような記述を見かけますが、標準化された構文では「どちら側から始まるか」ではなく「どちらへ向かうか」をtoで表現します。
| 種類 | 記述例 |
|---|---|
| 古い構文の例 | linear-gradient(top, #fff, #000) |
| 標準構文 | linear-gradient(to bottom, #fff, #000) |
現在のCSSでもlinear-gradient()は標準的なグラデーション関数として定義されています。[参照] MDN CSS <gradient>
linear-gradientとradial-gradientの違い
CSS Gradientsには複数の種類があります。代表的なのが直線方向に色を変化させるlinear-gradient()と、中心から外側へ放射状に変化させるradial-gradient()です。
線形グラデーションなら、例えば次のように記述できます。
background-image: linear-gradient(to right, red, blue);
放射状のグラデーションは次のような形です。
background-image: radial-gradient(circle, red, blue);
グラデーションは単なる背景色ではなく、CSS上では特殊な<image>として扱われます。現在の仕様や構文についてはMDNでも詳しく整理されています。[参照] MDN Using CSS gradients
IE9以前は同じようには使えない
IE10とIE9以前を区別することも重要です。IE10で標準的なCSSグラデーションが利用できるようになったからといって、同じコードがIE9以前でも動作するわけではありません。
IEの古い世代では、Microsoft独自のDXImageTransform.Microsoft.gradientフィルターなどが利用されていた時期があります。そのため、古いWebサイトのCSSを見るとfilter: progid:DXImageTransform.Microsoft.gradient(...)という、現在のCSSとは大きく異なる記述が残っている場合があります。
したがって、古いCSSを解析するときは「IE向けコードだからすべてIE10用」と考えず、IE6～9向けの独自フィルター、IE10開発途中の-ms-付き構文、IE10正式版の標準構文を分けて考えると理解しやすくなります。
IE10の-ms-プレフィックスは機能ごとに事情が違う
IE10では「CSS3に対応した＝すべての機能から-ms-が消えた」というわけではありません。当時の仕様の成熟度によって、プレフィックスなしで実装された機能と、Microsoftの-ms-プレフィックスが必要だった機能が混在していました。
例えばMicrosoftの資料では、IE10のCSS TransitionsについてMicrosoftベンダープレフィックスを付けずに使用するよう明記されています。[参照] Microsoft Learn
一方、IE10のFlexboxなどには当時の-ms-付き実装が存在します。このため「IE10なら-ms-が必要」「IE10なら-ms-は不要」とブラウザー単位で一括判断するのではなく、個々のCSS機能について確認する必要があります。
古いCSSでプレフィックスを複数並べている理由
2010年代前半のCSSでは、同じグラデーションについて-webkit-、-moz-、-o-、-ms-、そしてプレフィックスなしの宣言が大量に並んでいるコードをよく見かけます。
これは当時、各ブラウザーが実験段階のCSS機能をそれぞれのベンダープレフィックス付きで実装していたためです。MDNでも、ベンダープレフィックスは実験的・非標準の機能を通常のCSS名前空間と区別する目的で使われていたと説明されています。[参照] MDN CSS FAQ
したがって、古いソースコードに-ms-linear-gradient()が含まれていること自体は不思議ではありません。ただし、それだけを根拠に「IE10正式版でも-ms-が必須だった」と判断すると、開発途中の仕様と正式版を混同することになります。
まとめ：IE10正式版のCSS Gradientsはプレフィックスなしで使える
IE10正式版では、CSS Gradientsのlinear-gradient()などをベンダープレフィックスなしで利用できます。代表的な記述はbackground: linear-gradient(to bottom, #fff, #000);のような形です。
-ms-linear-gradient()というコードも実在しますが、IE10のプレビュー段階や当時の古い資料との関係を考慮する必要があります。正式版IE10を基準にするなら、グラデーションのためだけに-ms-プレフィックスを付ける必要はありません。
また、IE9以前は標準的なCSS Gradientsへの対応状況が異なり、古いMicrosoft独自フィルターが使われていた時代があります。IE10のCSS対応史を調べる際は「IE9以前」「IE10プレビュー版」「IE10正式版」を分けて考えると、古いコードに異なる書き方が残っている理由を理解しやすくなります。
コメント