CSS3 グラデーションの最新仕様を確認

「CSS Image Values and Replaced Content Module Level 3 W3C Candidate Recommendation 17 April 2012」

現時点で、CSS3 グラデーションについての最新仕様はこの中に含まれています。

当サイトにおいても簡単な線状のグラデーションを試しています。この CSS を見直して対応してみました。

    background-color: #ad4f4f ;
    background: linear-gradient(to right, #ffffff, #ad0404) ;
    background: -moz-linear-gradient(left, #ffffff, #ad0404) ;
    background: -ms-linear-gradient(left, #ffffff, #ad0404) ;
    background: -webkit-linear-gradient(left, #ffffff, #ad0404) ;
    background: -webkit-gradient(linear, left top, right bottom, from(#ffffff), to(#ad0404));

ベンダープレフィックスのない linear-gradient が最新の仕様に基づいた記述になります。

ブラウザによって対応状況が異なりますので、ベンダープレフィックスも必要となっています。

なお、旧仕様では left や top のように開始点を指定していましたが、最新の仕様では to right や to bottom のように終了点の方向を指定することなっています。

また、グラデーションをサポートしない旧バージョンのブラウザでは、background-color が有効となるようにしています。