CSSグラデーションの構文変更とベンダー接頭辞
前回のベンダー接頭辞に関するエントリで、接頭辞なしの機能を併記してもうまくいかないことがあると書きました。
これは、標準化された（接頭辞のない）機能の構文もしくは解釈が変わってしまう場合を意図しています。そして、CSSのグラデーションでそうした変更が加えられています。
linear-gradient()のキーワードが変更に
少し前の話になりますが、9月8日に更新されたCSS3 Image Values草案では、linear-gradient()の構文で利用されるキーワードの書式が変更されています。
| これまでの構文 | linear-gradient( [deg | side] , color-stops)
|
|---|---|
| 提案された構文 | linear-gradient( [deg | to side-or-corner] , color-stops)
|
これまで、キーワードは、topなら下向きのグラデーション、rightは左向きのグラデーションなど、グラデーションの基点を示していました。
しかし、7月12日版の草案でdegの解釈が変更され、0degが下から上へのグラデーションを表すことになりました。
ここで、0degは「上向き」topは「下向き」になります。どちらも「上」を想起させますが、グラデーションの方向が正反対になります。これは混乱のもとになります。
このため、9月8日版の草案でキーワードの構文が変更されました。新しいキーワードは、to bottom、to topなど、方向を示していることが文字から分かりやすくなりました。
/* これまでのキーワードは基点を指定する */
background-image: -moz-linear-gradient(top, #eee, #ddd);
/* 新しいキーワードは方向を指定する */
background-image: linear-gradient(to bottom, #eee, #ddd);
キーワードが変わってしまったため、linear-gradient(top, #eee, #ddd); など古いキーワードを利用した接頭辞なしの記述は無視されてしまいます。
解決策ではありませんが、上から下へのグラデーションについては、キーワードを省略すると良いかもしれません。キーワードを省略すると、それは下方向へのグラデーションになると定義されているのですが、これは接頭辞つきの実装と新しい仕様においても共通だからです。
background-image: -moz-linear-gradient(#eee, #ddd);
background-image: linear-gradient(#eee, #ddd);
radial-gradient()の構文が変更
構文の変更はlinear-gradient()だけなく、radial-gradient()にも及びそうです。今月初めに開催されたTPAC 2011のCSS WG F2Fミーティングで議論され、CSS WG BlogやCSS3.infoに、コメントを求める記事が投稿されています。
提案されている新しい構文では、to size, at positionなどキーワードを追加し、値だけだった以前の構文に比べて「読める」ようになっています。
| これまでの構文 | radial-gradient(position, [size || shape], color-stops)
|
|---|---|
| 提案された構文 | radial-gradient(shape [to size || at position], color-stops)
|
/* 位置、大きさ、カラーストップ */
background-image: -webkit-radial-gradient(10% 20%, 25px 25px, #999 50%, #fff);
/* 一例 */
background-image: radial-gradient(circle to 25px at 10% 20%, #999 50%, #fff);
/* 次のようにも書ける */
background-image: radial-gradient(at 10% 20% to 25px 25px, #999 50%, #fff);新しい構文によって将来的な拡張も容易になったとのことですが、既存の接頭辞つき実装と構文が異なるため、いま書かれている接頭辞なしの記述は無視されてしまいます。
追記 (2011-12-07)12月6日付で、[新しいImage Valuesモジュールの草案](http://www.w3.org/TR/2011/WD-css3-images-20111206/)が公開されました。radial-gradient()の構文が更に下記のように変更されました。
| 新しい構文 | radial-gradient( [ shape || size ] at position, color-stops)
|
|---|
既存コンテンツへの影響も
接頭辞なしの記述が無視されるだけであればよいのですが、接頭辞つき機能の実装が将来削除されることも否定できません。
たとえばMozillaは、-moz-background-sizeなど一部の接頭辞つき機能について、正式な機能を実装してから一定期間後に削除しています。接頭辞つきのグラデーション実装が削除されるとは思えませんが、すべての接頭辞つき機能が残り続けるわけではありません。
構文は変更されず、その解釈だけが変更されるとさらに厄介です。linear-gradient()の項でdegの解釈が変わったことに触れましたが、これは解釈の変更であり構文の変更ではないので、現時点で接頭辞なしの記述を含めたコンテンツで表示に影響が出かねません。
たとえば、AdobeがAdobe Labsにて実験的に提供しているFireworks CSS3 Mobile Packがでは、Fireworksで作成したグラフィック要素からCSSコードを自動生成する機能が提供されています。
デベロッパーセンターの紹介記事から、生成したコードの一部を取り上げます。
/* Firefox v3.6+ */
background-image:
-moz-linear-gradient(50% 0% -90deg,...
/* Chrome v10.0+ and by safari nightly build*/
background-image:
-webkit-linear-gradient(-90deg,...
/* Opera v11.10+ */
background-image:
-o-linear-gradient(-90deg,...
background-image:
linear-gradient(-90deg,...接頭辞つきの宣言の後に、接頭辞なしのlinear-gradient()が書かれています。記事中の画像から、このコードは垂直方向のグラデーションを意図したものと分かります。
しかし、degの解釈の変更によって-90degは左方向のグラデーションとして解釈されるようになりました。接頭辞なしの宣言を最後に書くことは通常よいプラクティスであるのですが、linear-gradient()ではdegの解釈が変わってしまったので、degを利用する場合は180degと角度を書き換える必要があります。
/* Opera v11.10+ */
background-image:
-o-linear-gradient(-90deg,...
background-image:
linear-gradient(180deg,...今回はたまたまの記事を見つけたこともありCSS3 Mobile Packを取り上げましたが、これはこの拡張パックに限った話ではないでしょう。グラデーションのコードを生成するWebアプリはいくつか公開されていますし、SassやLESSなどでMixinを定義している場合などにも、degの扱いに注意する必要があります。