今どきのCSS3グラデーションの指定方法 (2015年版)

今どきの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以下は非常に少なくなっており対応する必要はなくなってきています。

Androidのシェア

参考: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

スポンサードリンク

«babelifyでv7.x系を利用する | メイン | watchifyでファイルの監視を行う»