Monthly Archives: 5月 2012

各種ブラウザにおけるlinear-gradient対応状況について

ブラウザの種類・バージョンで書式が大きく違って何かとやっかいなlinear-gradient()の
対応状況をまとめてみました。
使用したサンプルはこちら
表示結果比較の画面キャプチャはこちら
【結果】
●-webkit-gradient(linear,left top,left bottom,from(#FC0),to(#fff));
[対応]Chrome/Safari4+/iOS4+/Android2.x/
●-webkit-linear-gradient(top,#FC0,#fff);
[対応]Chrome/Safari5+/iOS5+
●-webkit-linear-gradient(to bottom,#FC0,#fff);
[対応]なし
●-moz-linear-gradient(top,#FC0,#fff);
[対応]FireFox3.6+
●-moz-linear-gradient(to bottom,#FC0,#fff);
[対応]FireFox12+ ※いつから対応したか正確には不明。2012年上半期と思われます。
●linear-gradient(to bottom,#FC0,#fff);
[対応]なし
【2012年5月下旬時点での状況】
・-webkit-で新しい角度仕様(to bottomなど)に対応したブラウザはまだ無し。
・-moz-は最新版で新しい角度仕様にもプリフィクス付きで対応。
・プリフィクスなしでグラデーション実装したブラウザはまだ無し。
・PC向けの場合、Safari4を切れるなら-webkit-gradient()は不要。
・スマホ向けの場合、iOS4はともかくAndroidは切れないので-webkit-gradient()で実装。現状ではiOS5も-webkit-gradient()をサポートしているがいつまでそうするか不明なので心配なら-webkit-linear-gradient()も併記した方がいいかも?
・IE9は対応してない。IE10は調べてない。(誰か教えてください)
・Operaのことは無かったことにしている。
・Yahoo! Axis?なにそれおいしいの?(´・ω・`)
こんな感じでした。
スマホだとグラデーション特に多用するので、プリフィクス問題はほんと早く解決してほしい。
いっそプリフィクスなしサポートした時点でプリフィクス記述全部サポート外してくれてもいい。
一時大変かもしれないけど、その後は平和が待ってる。。。