今どきのCSS3グラデーションの指定方法

今どきかはわからないですがCSS3グラデーションの指定方法を再考してみました。

2015年11月9日 最新の状態を以下で追記事しております。
今どきのCSS3グラデーションの指定方法 (2015年版)

対応ブラウザ

現在の正式な記述「linear-gradient (to bottom)」とちょっとレガシーな記述「linear-gradient (top)」、それと古いWebKit用のgradientプロパティの対応状況を調べてみました(はベンダープリフィックスが必要)。ひとまず角度指定がどのバージョンから変更されたとか細かい変更は割愛、対応バージョンが間違っていたらごめんなさい。

Firefox Chrome Safari IE iOS Android
linear-gradient (to bottom) 16〜 26〜 6〜 10〜 7〜
linear-gradient (top) 3.6〜 10〜 5.1〜 10〜 5.1〜 4.0〜
-webkit-gradient 3〜 4〜 4.0.4〜2.1〜

意外とAndroid以外は最新ブラウザが正式な記述に対応しております。

正式な記述の対応が遅かったSafariやiOS、非対応のAndroidは比較的に古い段階から-webkit-gradientに対応してますので、-webkit-gradientも合わせて記述すると対応ブラウザを利用しているユーザーが一気に増えます。

IE9以下や上記の記述では対応できない古いブラウザにはちゃんとフォールバックを指定しましょう。

上記を踏まえると以下のように記述するのがシンプルでよいのではないかと落ち着きました。

/*Other Browser*/
background: #91bae4;
/*For Old WebKit*/
background: -webkit-gradient(
	linear, left top, left bottom,
	color-stop(0.00, #b6e2fd),
	color-stop(1.00, #87c2fb)
);
/*For Modern Browser*/
background: linear-gradient(
	to bottom,
	#b6e2fd 0%,
	#87c2fb 100%
);

Android 2.3やiOS4に対応しなくてよいなら以下のように-webkit-linear-gradientを利用したほうが記述するコストは少ないしdegなんかが利用できる。

/*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%
);

過度な後方互換性は意識せずにフォールバックで対応するのがよいんじゃかなと思っています。

関連エントリー

CSS3のFlexboxでパーセントで指定された要素を天地左右の中央に配置する
CSS3で実現するアローアイコン
CSS3アニメーションを利用したサンプル
クロスフェードを実現するCSS4のcross-fade()
レスポンシブイメージを実現するCSS4のimage-set

スポンサードリンク

«Google Chrome 32でスマホのエミュレーションを行う | メイン | Sass/Compassでコンパイルするとカラーコードが色名になってしまう件»