IE10 Platform Preview 1 における CSS3 グラデーション

Article
08/11/2011

本記事は、マイクロソフト本社の IE チームのブログから記事を抜粋し、翻訳したものです。

【元記事】CSS3 Gradients in IE10 Platform Preview 1 (2011/5/5 1:56 AM)

Internet Explorer 10 Platform Preview 1 において CSS グラデーションのベンダープレフィックスがサポートされるようになりました。CSS3 グラデーションは CSS3 Image Values and Replaced Content 仕様 (作業草稿段階) のサブセクションで定義されています。CSS マークアップを使用すると、ブラウザーによってグラデーション画像が生成され、CSS 画像が使用可能な場所に描画されます。Platform Preview 1 では、CSS3 グラデーションは背景画像として使用することができます。

CSS グラデーションを使用する理由

グラデーションは、サイトを視覚的に美しくする方法として Web 開発者がよく使用します。深さを表す効果や色の飛沫を表現するために使われたり、テキストとメニューの背景として微かなグラデーションが使用されます。

A few simple examples of subtle gradients used in the backgrounds of sites and menus
サイトおよびメニューの背景に使用されている微かなグラデーションの一例

グラデーション効果を作成する最も一般的な方法は、グラデーションが必要な場所にラスター画像を使用することですが、CSS グラデーションを使用すれば、Web コンテンツ作成者はグラデーション用に別の画像を作成する必要はありません。

CSS グラデーションなら CSS マークアップによって色が滑らかに変化するグラデーションを生成することができます。単色の背景と同様に、グラデーションを使用した背景は CSS で指定できます。また生成されたグラデーション画像は、適用されるコンテナーのサイズに依存します。

たとえば、サイズが変化する <div> 要素の背景にも、放射状グラデーションを簡単に指定することができます。パーセント単位を指定した 1 行の CSS マークアップで、さまざまなサイズの <div> にグラデーションを適用できます。

ラスター画像をグラデーションに使用すると、サイズが変化することでグラデーションの再現性が失われてしまいます。これは、グラデーションに background-size プロパティを使用した場合や、ズームが頻繁に行われる各種デバイスでの描画時にレンダリングする場合に一般的に起こる現象です。

Example of div formatted with
div { background-image: -ms-radial-gradient(yellow 0%, fuchsia 100%); }
を 3 つすべての <div> に適用

サイトの外観は簡単に変更することができます。必要な変更はすべて CSS スタイルシートで設定できます。

外部のグラフィックリソースを使用すると、グラフィックエディターによる更新が必要になりますが、CSS グラデーションを使用したサイトの色スキームの変更ならばそうした作業は必要ありません。

CSS グラデーションによって、Web コンテンツ作成者はサイトの外観を柔軟かつ簡単に変更することができます。特に、CSS3 Grid レイアウト、Flexible Box レイアウト、および Multi-column レイアウトなど、IE10 のより柔軟なレイアウト モデルでは、柔軟性がさらに重要になります。

またマークアップは帯域幅の消費が少なくて済みます。たとえば、 -ms- ベンダープレフィックスを使用したシンプルな 2 色の線状グラデーションは 38 バイトです。4 つのベンダープレフィックスとプレフィックスなしのバージョンを使ったとしてもマークアップは 198 バイトで、1x100 PNG 形式で同じグラデーションを表現した場合 (215 バイト。背景画像のマークアップは含まれない。非常に小さなグラフィックを繰り返すという手法) よりも軽量です。さらに、画像ファイルを別途読み込む必要がないため、その分時間が短縮されます。

CSS グラデーションの使用法

CSS グラデーションは図形と色境界で定義します。グラデーションには複数の色境界を設定でき、各色境界に RGBA 色と位置を指定します。

CSS グラデーションには、線状グラデーションと放射状グラデーションの 2 種類があります。

名称はグラデーションの形状を表しています。線状グラデーションと放射状グラデーションのマークアップ例と、IE10 Platform Preview 1 でのレンダリング結果を以下に示します。

線状グラデーションはご覧のとおり、グラデーション線の方向をキーワード (top/bottom、left/right) や角度など、一連の色境界で定義します。各色境界には色を指定し、任意で位置 (グラデーション線からの距離) を指定します。生成された線状グラデーションでは、色境界の間を滑らかに色が変化します。

Example of div formatted with
背景画像 : -ms-linear-gradient(30deg, orange, yellow 50%, turquoise);

放射状グラデーションは、background-position と同じ構文を使ってグラデーション楕円の中心位置を任意で指定できます。図形 (円または楕円) とグラデーションのサイズを、キーワードまたは長さ/パーセントで指定します。

Example of div formatted with
背景画像 : -ms-radial-gradient(top center, circle cover, orange, yellow 25px, turquoise);

CSS グラデーションをサポートすることで、読み込み時間の短縮とグラフィックの再現性というメリットを利用することができ、一方 CSS グラデーションをサポートしないブラウザーに対しては、外部の背景画像や単色を表示することができます。これには、カスケード処理で、外部の画像や単色の後に CSS グラデーションが来るようにするだけです。こうすることで、グラデーションの構文を認識するブラウザーは CSS グラデーションを使用し、認識しないブラウザーはこれを無視して、既に指定された背景を使用します。

{
    background: #FFFFFF;
    background-image: -ms-radial-gradient(top center, circle cover,
        orange, yellow 25px, turquoise);
}

IE10 Platform Preview 1 の既知の問題

IE10 Platform Preview 1 では、プリマルチプライ済みのアルファ色空間での色補間はサポートしていません。このため、"アルファ値が異なる" rgba() 色境界間の補間は、本来の美しい外観を実現できません。これは黒、アルファ値 0 の色境界で顕著になります。透明な黒の色境界に向かって、きれいな透明にそのままフェードするのではなく、黒にフェードしてから透明になります。

白い背景に、橙色から透明な黒へのグラデーション、rgba(0, 0, 0, 0) を設定すると、以下のように表示されます。


プリマルチプライ処理なしの色空間	プリマルチプライ済みの色空間

IE10 では、プリマルチプライ済みの色空間における色補間がサポートされます。これは今後の Platform Preview で提供される予定です。

また、list-style-image および生成コンテンツでの CSS グラデーションが、IE10 および今後の Platform Preview でサポートされる予定です。

Platform Preview 1 では、グラデーションの繰り返し (-ms-linear-gradient と -ms-radial-gradient—reflect の代わりに、-ms-repeating-linear-gradient と -ms-repeating-radial-gradient を使用) はグラデーションが表示されますが、繰り返されません。この機能も IE10 で修正される予定です。

WebKit ベースブラウザーの相互運用性に関する注意事項

執筆時点で、Safari 5.0.4 は、最新の W3C 作業草稿が定めるベンダープレフィックス版の CSS グラデーション構文はサポートしていません。

Webkit は、CSS グラデーションの別構文のベンダープレフィックス版のサポートを開始しました。Safari は現在これをサポートしています。しかし最近になって Webkit はグラデーション構文の標準版のベンダープレフィックス版をサポートするようになりました。

同じく Webkit レンダリングエンジンベースの Chrome は現時点で W3C 草稿版の構文をサポートしています (Chrome 10.0.648.204)。Safari はグラデーション構文の標準版に対応することが予想されますが、Safari で CSS グラデーションを表示するにはグラデーション定義の追加が必要なので注意してください。

実際に試してみる

IE10 Platform Preview 1 で CSS3 グラデーションをお試しいただき、その感想をマイクロソフトまでぜひお寄せください。IE Test Drive サイトの CSS Gradient Background Maker を使って、相互運用可能なマークアップを生成してみてください。

IE9 でグラデーションを利用する方法ですが、SVG Gradient Background Maker を使えば、IE9 など多くの最新ブラウザーに対応した SVG ベースの CSS 背景画像を生成できます。SVG グラデーション背景画像と CSS グラデーション背景画像を組み合わせることで、IE9 を始めとする最新版ブラウザーで機能するマークアップを作成することができます。

—Jennifer Yu、プログラムマネージャー、Internet Explorer Web グラフィックス