スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。


このエントリーをはてなブックマークに追加

各種ブラウザにおける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?なにそれおいしいの?(´・ω・`)

こんな感じでした。
スマホだとグラデーション特に多用するので、プリフィクス問題はほんと早く解決してほしい。
いっそプリフィクスなしサポートした時点でプリフィクス記述全部サポート外してくれてもいい。
一時大変かもしれないけど、その後は平和が待ってる。。。



このエントリーをはてなブックマークに追加
スポンサーサイト
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。