linear-gradientになったワケ

フロントエンド
date 2012.05.29 tag CSS
CSS3のグラデーションプロパティが「linear-gradient」となる方向に向かっています。Webkit系のブラウザでは「gradient」というプロパティがあったけど、こっちはもう使わない方がいいみたい。この件に関してMozillaがさらっと書いていたので、紹介します。

ことの発端、gradientプロパティ

まず、CSS3グラデーションは2008年にAppleが提案&実装したのが始まりです。(Introducing CSS Gradients) このgradientプロパティの文法はグラデーションの種類にlinear(線形)かradial(円形)のように特有の値を指定するもの。ただ、この特定の値を指定することに関して議論が開始。

さらにいつの間にかとto()やfrom()、color-stop()と言ったものまで増えたことがあり、文法がややこしいことに。最終的にはW3Cで草案に至らず、終了。ちなみにgradientプロパティでグラデーションを書くとすると以下のようになります。ちとごちゃごちゃしてるように見える。

CSS

[css]
background:-webkit-gradient(linear, left top, left bottom, from(#00abeb), to(#fff));
[/css]

linear-gradientの提案

2009年になって、Mozillaはgradientプロパティの代わりとなるものを提案&実装しました。これがlinear-gradient。文法がよりシンプルになってto()やfrom()が無くなりました。最初は単純なグラデーションの描写を想定していたけど、W3Cのワーキングドラフトを経て角度の指定もできるように。
仕様の詳細を説明できるほど分かってないので詳しくは最新のワーキングドラフトをご覧ください>< ※1

ちなみにこれがlinear-gradientのシンプルな文法。最初のと同じグラデーションが描かれるけど、こっちの方が短くて直感的に分かりやすい。

CSS

[css]
background:-webkit-linear-gradient(top, #00abeb, #fff);
[/css]

まとめ

以上、ベンダー各社がgradientからlinear-gradientへと移行した理由でした。とは言え・・・過去のWebkit系のブラウザはlinear-gradientに対応してないので(確か)記述を一本化するのは悩ましいところですねえ。とりあえず時代の流れ的にはこうなってる、ということはチェックしておきましょー。

ちなみに現在、linear-gradientは以下の環境よりベンダープレフィックス付きで実装されてます。

  • Firefox3.6
  • Google Chrome10.0
  • IE10.0
  • Opera11.0
  • Safari5.1