[CSS3]今から出来るIE対策 「影とグラデーション編」

サイトをHTML5とCSS3に対応させたことによって、IEの表示がおかしくなっていました。
前々から、IEは全く同じデザインにはなってなかったのですが、出来るだけ同じように表示されるよう調整してみます。

prototype.jsのエラーの回避

WordPressでLightboxやらのprototype.jsを使うプラグインとjQueryを使用すると、IE8で「prototype.js」のエラーが発生することがあります。
主に投稿画面で発生します。

WordPress3+prototype+jQuery+IE8=ヽ(`Д´)ノドッカァァァン!!

これを回避するにはWindowsアップデート、もしくはIE7互換モードにする必要があります。
症状が出るかは各自テストで確認してください。

互換モードにするには<head>に以下のコードを入れてください。

1
<meta http-equiv="X-UA-Compatible"; content="IE=emulateIE7"; />

参考サイト:WordPress3.0 続・prototype.jsを使うとIE8で表示が・・・ | ネットインパクト

IE9はまともにグラデーションに対応していない

これのせいでIE9が好きになれない!
CSS3でグラデーションをかけるとします。以下のようなCSSになります。

1
2
3
4
5
6
background:#fff; /* for non-css3 browsers */
background:linear-gradient(#ffffff, #000000); /* CSS3草案 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#000000'); /* IE6,7用 */
-ms-filter: &quot;progid:DXImageTransform.Microsoft.Gradient(StartColorStr=#ffffff, EndColorStr=#000000)&quot;; /* IE8,9用 */
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#000000)); /* Safari,Google Chrome用 */
background: -moz-linear-gradient(top, #fff, #000000); /* Firefox用 */

長ったらしい上に、何故かIE用にいくつも指定しないといけない。

※稀にwebkitでグラデーションが効かないことがあります。グラデーション構文の順序を変えることで有効になったりします。

本来、CSS3本来のbackground:linear-gradient();で表示されれば解決なんですが、ブラウザ毎に指定する必要があります。
FirefoxとChromeは書けば動くので問題ありません。
もちろん、これだけならばIEでもIE6〜IE9までグラデーションは効きます。

ただし、IEはグラデーションをfilterで効かせると角丸(border-radius)が効かなくなります。
box-shadowは丸くなっています。

border-radiusのCSS

1
2
3
border-radius: 15px; /* CSS3草案 */
-webkit-border-radius: 10px; /* Safari,Google Chrome用 */
-moz-border-radius: 10px; /* Firefox用 */

box-shadowのCSS

1
2
3
box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.2), inset 0 0 10px rgba(0, 0, 0, 0.1); /* CSS3草案 */
-webkit-box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.2), inset 0 0 10px rgba(0, 0, 0, 0.1); /* Safari,Google Chrome用 */
-moz-box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.2), inset 0 0 10px rgba(0, 0, 0, 0.1); /* Firefox用 */

border-radiusとbox-shadowに関してはCSS3本来の書き方でIE9で有効になります。

さて、IEでグラデーションと角丸を両方使うにはどうするか?
→border-radiusを諦める or グラデーションを諦める
→少し重くなるが、JavaScriptを使う

諦めるのが一番簡単です。IEだけどちらかを削ったり、IE専用のスタイルを用意します。

JavaScriptでIE6/7/8をCSS3に対応させる

JavaScriptを使用すれば、IE6,7,8でも角丸が有効になる恩恵があるので、古いブラウザでも同様の表示をさせたいのなら使いましょう。
IEにCSS3を対応させるjsは数多くあります。

以下のページで分かりやすくまとめられていました。
CSS3が非対応なブラウザでも利用できるようにするツールのまとめ | コリス

私はデモページがあって分かりやすいCSS3 PIE: CSS3 decorations for IEを使ってみました。

使用方法は以下のページで
たった一行を追加するだけでIE6/7/8をCSS3対応にする -CSS3 PIE | コリス

やってみました。デモページで作成したものをコピペすればいいです。
実際には2行足すだけですね。
※PIE.htcは絶対パスを入力してください。

1
2
3
4
5
6
7
8
9
10
11
12
13
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: #666 2px 2px 3px;
-moz-box-shadow: #666 2px 2px 3px;
box-shadow: #666 2px 2px 3px;
background: #ffffff;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#ffffff), to(#EBEBEB));
background: -moz-linear-gradient(#ffffff, #EBEBEB);
background: linear-gradient(#ffffff, #EBEBEB);

-pie-background: linear-gradient(#ffffff, #EBEBEB);
behavior: url(/PIE.htc);

これでIE6〜IE8も角丸とグラデーションを効かせることが出来ました。