スマホサイトはCSS3の背景色グラデーションを複数指定しましょう

こんにちは、x-fit開発スタッフの山本大輔です。

x-fit開発チームが所有するスマートフォンを使って、CSS3の背景色グラデーションにどのくらい対応しているかを調査しました。その結果をお知らせします。

1. background: -webkit-linear-gradient(top, #A1A1A1 0%, #595959 100%);
2. background: -webkit-gradient(linear, left top, left bottom, from(#A1A1A1), to(#595959));

背景色のグラデーション指定には主に上記2パターンの書き方があるのですが、調べてみると最新の書式（1）では一部の端末しか効かないようです。

調査した7機種について、有効か無効かを表にまとめました。

PCブラウザのChrome（18.0.1.25.162）で確認してみると、どちらの書式でも有効でした。

「開発中はPCブラウザで確認」という手法が多いと思います。これでは開発中はグラデーションが効いていたはずなのに、その後にスマートフォンの実機で見たら背景色に何も指定されていない！、ということが往々にありそうです。

そのため、スマホサイトでCSS3の背景グラデーションを指定する場合は、複数の指定を書いておくことをオススメします。

複数指定の例

.bggradient{
  background: -webkit-linear-gradient(top, #A1A1A1 0%, #595959 100%);	[1]
  background: -webkit-gradient(linear, left top, left bottom, from(#A1A1A1), to(#595959));	[2]
  filter: progid:DXImageTransform.Microsoft.gradient(Enabled=1,GradientType=0,StartColorStr='#ffFAFAFD',EndColorStr='#ffD5DFF7');	[3]
  background-color:#A1A1A1;	[4]
}

上記のように書いておけば、[1]が効かない場合、[2]が効きます。
WindowsPhoneにも対応させるために、[3]の指定をします（※）。
また、最悪どれも効かない場合のために、[4]の指定をしておきます。背景色を設定しておくことで、グラデーションが効かなくても背景色に何も指定がない事態が回避できます。

※WindowsPhone（IS12T）は搭載ブラウザがIEのため、filterでグラデーションを指定する必要があります。