ブログ

リステップからのお知らせや、ホームページを活用するためのお役立ち情報などをご案内。

CSSのグラデーションがAndroidの2系で反映されない?

[`evernote` not found]
Delicious にシェア

スマートフォンサイトを作成する場合、古いブラウザを考慮しなくていいので角丸やグラデーション、ドロップシャドウなどCSS3を駆使して作成することが多いと思います。

しかし、あるときAndroidでグラデーションが反映されないことがありました。

 

スマートフォンの場合、Android、iPhoneともにブラウザのレンダリングエンジンはWebKitがほとんどです。そして、WebKit系のブラウザでグラデーションをかける場合、

background: -webkit-linear-gradient( top, #999, #ccc );

と書く場合と、

background: -webkit-gradient( linear, left top, left bottom, from(#999), to(#ccc) );

の2通りの書き方があります。

 

前者のほうがFirefox用の記述に近いので多用していたのですが、どうやらAndroidの2系のブラウザではグラデーションが表示されませんでした。(Androidの4系ならOKです)

後者の記述であればAndroidの2系でも適用されたので、スマートフォンサイト用のCSSでグラデーションを使用する場合は -webkit-gradient を使ったほうが良さそうです。

[`evernote` not found]
Delicious にシェア

コメントする


次のタグを使うことができます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

トラックバック

トラックバックURL: https://restep.jp/blogs/css-gradient-android2/trackback/