IE10に対応するためにCSS3のlinear-gradientはどう書いたらいいのかなというお話

2013.08.28 Category:CSS Tag:CSS3

1年ほど前に、画像を使わないで、CSSを使ってグラデーションする！！（IE対応）という記事を書いたのですが、久しぶりにIEを立ち上げてデモを見てみると。。ちゃんと見えない。。

という事態が起きていたので修正し、改めてここで復習の意味も込めてまとめておこうと思います。

大きな変更点

これまでのバージョンでも様々な記述方法がありますが、ここでは、IE10のみに絞って書いて行きます。

ベンダープレフィックスなしでの記述
方向などのキーワード

ベンダープレフィックスなしでの記述

今までつけていた -ms- をつけない形式でサポートされる。

2011 年2 月の W3C 草案にあるプレフィックスありの記述もサポートしているみたいなので、一応従来通り記述していれば問題無さそう。

方向などのキーワード

ここが実にぐぬぬぅとなりそうなところです。

方向キーワード

top、bottom、left、right キーワードの前に" to " が置かれ、終了点に基づいてグラデーション線の方向を示します

具体的には、上から下へは以下のようになります。

/* 今まで */  
-ms-linear-gradient(top, #000, #FFF);

/* IE10 */  
linear-gradient(to bottom, #000, #FFF);

/* 今まで */

-ms-linear-gradient(top, #000, #FFF);

/* IE10 */

linear-gradient(to bottom, #000, #FFF);

角キーワード

角キーワードは "to" の後に置かれ、指定された四分円から開始して反対の四分円で終わるグラデーション線を指定します。グラデーション線の中央点は、他の 2 つの角の間に描かれる線と交差します。

これもキーワードの前に "to" が置かれます。

具体的には、左上から左下へは以下のようになります。

/* 今まで */  
-ms-linear-gradient(top left, #000, #FFF);

/* IE10 */  
linear-gradient(to bottom right, #000, #FFF);

/* 今まで */

-ms-linear-gradient(top left, #000, #FFF);

/* IE10 */

linear-gradient(to bottom right, #000, #FFF);

角度の方向

反時計回りに大きくなるから、時計回りに大きくなるへ変更になっています。

円形グラデーション

位置のキーワードまたは長さの前に" at " が付くようになります。

位置

具体的には、中心からは以下のようになります。

/* 今まで */  
-ms-radial-gradient(center, #000, #FFF);

/* IE10 */  
radial-gradient(at center, #000, #FFF);

/* 今まで */

-ms-radial-gradient(center, #000, #FFF);

/* IE10 */

radial-gradient(at center, #000, #FFF);

ここまでがさっくりとした変更点のまとめです。

参考：　

IE10 のプレフィックスのない CSS3 グラデーション｜ IEBlog 日本語

IE5.5-10まで対応

では、実際に古いIEから新しいIEまでを、グラデーションをさせたいときはというと、

上から下への基本的なもの

/* IE 5.5-7 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#ffffff', GradientType=0);

/* IE 8+ */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#ffffff', GradientType=0)";

/* IE 10 */
background: linear-gradient(to bottom, #000, #fff);

/* IE 5.5-7 */