2012-01-14

Last CallったCSSグラデーションの文法

CSS Image Values and Replaced Content Module Level 3がLast Callったので読みなおした。古い独自実装の文法と旧仕様に基づく文法、Last Callに基づく文法にベンダー拡張プリフィックスが組み合わさるカオスな世界の始まりですね！(ブラウザがよしなにしてくれることを期待せずに)まともに対応させようとしたらCSSグラデーションを背景に使うためにbackground-imageを10行くらい書かなくてはならなそうで、もはやSassやLESSの出番とかそういう次元の話ではない。

Last Callの仕様でのlinear-gradient()関数の文法は以下のように定義されている。

<linear-gradient> = linear-gradient(
        [ [ <angle> | to <side-or-corner> ] ,]?
        <color-stop>[, <color-stop>]+
)

<side-or-corner> = [left | right] || [top | bottom]

なので、

.test {
  background-color: linear-gradient(top, #fff, #000);
}

とか書けなくなるように読める(キーワードを使う場合はto必須に読める)。いつどうやって切り替えるか悩ましい。クソAndroidのクソブラウザとかがひどそう。(ここにうまい喩えが入る予定)。実際には旧文法をよしなに解釈してくれそうなので、今まで通り書いてれば普通にうまく行きそうではある。

もうCSSグラデーションで遊ぶのは飽きたので、親要素のサイズを考慮して画像を柔軟にリサイズすることが可能になるobject-fitと画像のスライドショーに簡単にサムネイルが付けられるようになりそうなelement()を使いまくって遊びたい。