CSS3「gradient(グラデーション)」のIE対応方法

今回、ブログをリニューアルした最大の目玉は「CSS3」の導入です。画像を使わなくても様々な視覚的効果を与えることができるので、こりゃドンドン活用していくべき!と思ったんですが、問題が一点。

IEが全く対応してくれてないorz

この、腐れブラウザめ!

という心の声はおいといて、以下、私がCSS3をIEに対応させるためにやったこと、まとめです。

角丸とテキストシャドウは捨てた

いきなり身も蓋もない感じで恐縮です。
今回、ブログをリニューアルした際に使ったCSS3のプロパティは次の3つ。

  • text-shadow(テキストシャドウ)
  • border-radius(角丸)
  • background:gradient(背景グラデーション)

text-shadowは、使ってる所が微細ということで捨て。border-radiusは「PIE.htc」を使って実現してみたものの、ちょいと表示が重くなってしまうので捨て。ま、なくて困るもんじゃないし、IEユーザー、勘弁な。(とは言え、角丸は対応したかったなぁ…。)

結局「background:gradient(背景グラデーション)」のみをIEに対応させることにしました。

IE用CSSファイルを作ってIEだけ読み込む

さて、gradientをIEに対応させるには、「filter」というIE独自のCSSプロパティを使う必要があるんですが、そのためにはIE用のCSSを設定することになります。

あくまでIE用ということで、他のブラウザでは読み込ませたくない。ということで、HTMLヘッダーに次の一文を記載。

IEだけCSSファイルを読み込ませるためのlinkタグ

<!--[if IE]><link rel="stylesheet" href="<?php my_siteparts(); ?>/css/css3ie.css" type="text/css" /><![endif]-->

<!–[if IE]>●●●<![endif]–>とすることで、「IEのときだけ読み込んでね」という設定になります。で、ここにIE用CSSファイルへのリンクタグを埋め込めば、IEのときだけそれが読み込まれることに。

IEごときのためにゴチャゴチャしてくるのは嫌!ということで私は別ファイルに分けましたが、メインのCSSファイルにIE用の設定を書いておいても問題はありません。

IEでは「filter」でグラデーションを実現

通常、CSS3でボックスにグラデーションをつけるためには、次のような感じになります。

CSS3を使ったグラデーションの指定

.hogehoge {
	/* 通常 */
	background:linear-gradient(#ffffff, #eeeeee);
	/* webkit用 */
	background:-webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#eeeeee));
	/* mozilla用 */
	background:-moz-linear-gradient(top, #ffffff, #eeeeee);
}

本来の書き方、webkit(GoogleChroem)用、mozlla(Fierfox)用の3パターン。めんどくさいですね。でも書いて反映されるだけ素晴らしい。

で、IEにグラデーションを反映させるためのものはこんな感じ。

IE独自プロパティ「filter」を使ったグラデーションの指定

.hogehoge {
	/*IE6 IE7 */
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startcolorstr=#ffffff, endcolorstr=#eeeeee));
	/* IE8 */
	-ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=0,startcolorstr=#ffffff, endcolorstr=#eeeeee))";
	zoom: 1;
}

IE6・IE7用、IE8用の2パターンと、最後におまじないの「zoom:1;」。メンドクサイわダラダラ長いわ、最悪。IE9用は分かりません。知りません。

この、腐れブラウザめ!

という心の声はおいといて、とりあえず上記のように書けば、IEでもグラデーションをつけることができるようになります。

ぶっちゃけ、グラデーションも角丸もテキストシャドウも、IEを無視してもデザイン的には問題ない感じになるので、面倒なことまでしてIEの相手なんてしたくねーよ!という方はそれもありかと。

ひと手間かければIEユーザーにも似たようなデザインを提供できますよ、ということで。

参考:角丸とテキストシャドウ

この記事の本題はグラデーション、角丸とテキストシャドウは捨てたんですが、一応、参考までにCSSの書き方を置いておきますね。

border-radius(角丸)

.hogehoge {
	/* 通常 */
	border-radius:5px;
	/* webkit用 */
	-webkit-border-radius:5px;
	/* mozilla用 */
	-moz-border-radius:5px;
}

text-shadow(テキストシャドウ)

.hogehoge {
	/* 通常 */
	text-shadow: #eeeeee 0px 0px 1px;
}