IE9 から CSS3 に対応予定ですが、Win XP で使用することができません。当分の間はWin XP と一緒に、IE8 が取り残されていくと思います。他のモダンブラウザ用に CSS3 で装飾していくと、IE8 以下での見た目が貧弱過ぎて萎えてしまいます。そんな時に便利なのが、CSS3 PIE です。
以前使っていたのですが、その時には少々重かったので取り止めてしまいました。久しぶりに新しいバージョンを使用してみたら、以前よりも軽くなっていたので再度使用する事にしました。現時点で Ver.1.0 beta3 を使用しています。
導入手順
以下から最新版をダウンロードして下さい。
ダウンロードした PIE.htc を、サーバーの任意の場所にアップロードして下さい。
PIE.htc ファイルが使用できない場合、JS バージョンを試してみて下さい。
PIE.js – PIE JavaScript edition
適用方法
使用したい場所に、以下を記述します。
behavior: url(/PIE.htc);WordPress の場合では、以下のような感じです。パスは自身の環境に合わせて下さい。
behavior: url(/wp-content/themes/yourtheme/PIE.htc);border-radius
角丸を適用させる。
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
behavior: url(/PIE.htc);box-shadow
シャドウを適用させる。
-moz-box-shadow: 3px 3px 5px #4680CC;
-webkit-box-shadow: 3px 3px 5px #4680CC;
box-shadow: 3px 3px 5px #4680CC;
behavior: url(/PIE.htc);CSS3 Backgrounds
グラデーションを適用させる。独自の -pie-background を追加する。
background: #5588CC;
background: -moz-linear-gradient(center top, #64A0F0, #5588CC);
background: -webkit-gradient(linear, center top, center bottom, from(#64A0F0), to(#5588CC));
background: linear-gradient(center top, #64A0F0, #5588CC);
-pie-background: linear-gradient(#64A0F0, #5588CC);
behavior: url(/PIE.htc);適用させたら消えてしまう場合
適用させて消えてしまう場合は、以下を記述する。
position: relative;
背景が消えてしまう場合がある
問題なさそうな場所でも注意
見た目で問題がなさそうに見えても、消えてしまう事があるので注意が必要です。私が遭遇したのは、コメントの返信の所です。通常のコメントフォームでは消えなかったのですが、返信する所に移動すると消えてしまいました。入れ子具合が影響しているのかも？
移動すると消える！
確認せずに position: relative を適用するのも注意
面倒だから全部適用させちゃえって気持ちになりますが、環境により不具合が発生します。しっかりと吟味して使用した方が良いですね。
IE7 でこんなことが！
使用してみての感想
IE8 以下で使用することができますが、バグが多い IE7 と IE6 以下で使用するのは大変そうです。施しているハックなどが影響して、不具合を起こす予想ができない感じです。頻繁にチェックをする気がないなら、IE8 に絞って適用させるのが良さそうだと思いました。
とりあえず一気に全部に適用はせずに、サイトの基本的な部分に使用してみました。記事に当たる部分での使用は、現在は見合わせている感じです。ナビメニューなどの入り組んだ場所での使用は、環境にもよりますが避けた方が良さそうです。
そこそこの見た目を確保して、これから根強く残って行くだろう IE8 の描写をアップさせられればと思います。今の IE6 の立ち位置に IE8 が来る日も、そう遠くはないのではないでしょうか。
