今どきのCSS3グラデーションの指定方法 (2015年版)
昨年、「今どきのCSS3グラデーションの指定方法」という記事を書いてそこそこアクセスがあるのですが、今年に入って状況が変わってきたのでアップデートしておきます。
まずは各ブラウザの対応状況。現在の正式な記述「linear-gradient (to bottom)」とちょっとレガシーな記述「linear-gradient (top)」、それと古いWebKit用のgradientプロパティの対応状況です。
Firefox | Chrome | Safari | IE | iOS | Android | |
---|---|---|---|---|---|---|
linear-gradient (to bottom) | 16〜 | 26〜 | 6〜 | 10〜 | 7〜 | 4.4〜 |
linear-gradient (top) | 3.6〜 | 10〜 | 5.1〜 | 10〜 | 5.1〜 | 4.0〜 |
-webkit-gradient | 3〜 | 4〜 | 4.0.4〜 | 2.1〜 |
前回との差異はAndroid4.4よりlinear-gradient (to bottom)に対応している点です。
Androidブラウザのシェア
現在のAndroidブラウザのシェアですが、Android4.0以下は非常に少なくなっており対応する必要はなくなってきています。
参考:Dashboards | Android Developers
というわけで、-webkit-gradient()による指定はもう不要で-webkit-linear-gradient()とlinear-gradient()のみ記述しておけば、ほとんどのブラウザに対応可能です。
/*Other Browser*/
background: #91bae4;
/*For Old WebKit*/
background: -webkit-linear-gradient(
top,
#b6e2fd 0%,
#87c2fb 100%
);
/*For Modern Browser*/
background: linear-gradient(
to bottom,
#b6e2fd 0%,
#87c2fb 100%
);
縦方向のグラデーションなら値を省略して書くとベンダープリフィックスありもなしも値は同じ指定で大丈夫です。
/*Other Browser*/
background: #91bae4;
/*For Old WebKit*/
background: -webkit-linear-gradient(
#b6e2fd 0%,
#87c2fb 100%
);
/*For Modern Browser*/
background: linear-gradient(
#b6e2fd 0%,
#87c2fb 100%
);
Android4.3以下のシェアが下がってくれば-webkit-linear-gradient()も記述しなくてよくなりそうですが、それにはまだ少し時間がかかりそうです。
関連エントリー
CSS3のベンダープリフィックスを後付けする「grunt-autoprefixer」
CSS3で実現するアローアイコン
CSS3アニメーションを利用したサンプル
CSS3でのposition:relative
クロスフェードを実現するCSS4のcross-fade()
レスポンシブイメージを実現するCSS4のimage-set