「[β版] Photoshopのグラデーションオーバーレイ設定を取得するスクリプト」を更新する際、CSSグラデーション（linear-gradient()）の構文変更が最新のブラウザではどう扱われているのか気になり、実装状況の確認を行いました。
構文・解釈の変更内容
キーワードの構文変更
グラデーションの起点を示していたものが、2011年9月8日付の草案より"to bottom"のようにグラデーションの方向を示すようになりました（"to"というワードと共に指定する）。つまり、上から下へのグラデーションは従来topと記述していましたが、to bottomと記述するようになりました。
// 2012年1月12日付最終草案に基づく記述方法
background-image: linear-gradient(to bottom, black, white);角度表記の解釈の変更
水平右方向を0°とし反時計回りに回転するものとなっていたものが、2011年7月12日付の草案より方位角（0°は下から上で時計回りに回転）となりました。つまり、0degは左から右へのグラデーションを表していたものが、下から上へのグラデーションを表すものになっています。
ブラウザの実装状況
PC向けブラウザにて確認を行いました。
確認したブラウザ
- Internet Explorer 10.0.8103.0
- Firefox 10.0
- Safari 5.12(WebKit r105480)
- Opera 11.61
- Google Chrome(18.0.1012.1 canary)
確認結果
現在のところ、ベンダープリフィックスなしの記述はどのブラウザも解釈しませんでした。そこで、ベンダープリフィックスを付加した記述でレンダリングを確認しました。
まず、Firefox 10.0(Beta)・Opera 11.61ですが、キーワードの解釈に関してはtoあり/なしどちらの構文も解釈するようになっていました。つまり次の2つの記述方法は、同じグラデーションのレンダリングとなります。
// 従来の記述方法
background-image: linear-gradient(bottom, black, white);
// 2012年1月12日付最終草案に基づく記述方法
background-image: linear-gradient(to top, black, white);角度の解釈に関しては、古い解釈のままでレンダリングされました。つまり0degは左から右へのグラデーションとなります。
次にその他のブラウザ（Internet Explorer 10、Safari 5.12、Google Chrome 18.0.1012.1）ですが、キーワードに関して、toありの構文はサポートされていませんでした。また、角度の解釈に関しては、古い解釈のままでレンダリングされました。
今後について
Firefoxに関しては、ベンダープリフィックスを外した記述が実装される際にtoなしの構文はサポートされなくなる計画のようです。角度の解釈についても、ベンダープリフィックス付きの記述の場合は後方互換性を考慮して従来の解釈方法を採用し続け、ベンダープリフィックスが外れる際に最新の仕様通りの解釈に変更されるものと予想しています。
まとめ
現時点でクロスブラウザなグラデーションの記述は、ベンダープリフィックスを伴った記述の場合は最新の草案に沿った構文ではなく従来の構文で記述を行い、ベンダープリフィックスを伴わない記述の場合は最新の草案に沿った構文で記述をしておくのがベターと考えます。
.sample{
background-image: -webkit-gradient(linear, left bottom, left top, from(black), to(white));
background-image: -webkit-linear-gradient(bottom, black, white);
background-image: -moz-linear-gradient(bottom, black, white);
background-image: -o-linear-gradient(bottom, black, white);
background-image: -ms-linear-gradient(bottom, black, white);
background-image: linear-gradient(to top, black, white);
}