CSS3 グラデーション WebkitとFirefoxが同じに！

2011年1月14日の Webkit.org の Surfin Safari にて CSS3 のグラデーションの記述が変更になったことが紹介されました。CSS3 グラデーション は、Webkit が2008年に最初に紹介した CSSのプロパティです。今回、この記述方法に変更がありました。




現在は、Safari4+、Chrome、Firefox3.6+ でサポートされています。
今まではWebkit系の Safari4とChromeの CSS3 グラデーションの記述方法と、Firefoxのそれでは大幅に違いました。

いままでの記述方法

Safariとchromeの場合

background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.39, rgb(108,218,3)),
    color-stop(0.7, rgb(141,255,29)),
    color-stop(0.85, rgb(170,255,56))
);

Firefoxの場合

background-image: -moz-linear-gradient(
center bottom,
    rgb(108,218,3) 39%,
    rgb(141,255,29) 70%,
    rgb(170,255,56) 85%
);

特に、「-webkit-gradient(liner)」か「-moz-linear-gradient」のグラデーションのタイプを線形に指定する「linear」の記述方法の違い大きいものです。今までは、上記のように同じグラデーションを指定するにしても Safariとchrome用とFirefox用の2種類の記述をしなければいけませんした。


しかし、今回 SafariとChromeの元になる Webkitがnigtlyバージョンで、シンタックスが更新されました。これは、W3Cの Image Values and Replaced Content module にて新たに editor`s draftではありますが新しいシンタックスがまとめられたのを受けてです。

新しい記述方法

線形グラデーションの場合

background-image: -webkit-linear-gradient(red, green, blue);

円形グラデーションの場合

background-image: -webkit-radial-gradient(circle, white, black);

この記述方法は、まだ editor`s draft です。正式に決定したものではありませんので、今後変更もありえます。