「CSS3 PIE」でIEでも複数背景画像を表示させる。はずがうまくいかない場合
サイト高速化の記事を書きます、と引っ張っておきながら本日はちょっとCSSについて書こうと思いますw
ちょっといじっていたらうまくいっちゃったから忘れないうちに書いときたいんだ！
さて、CSS3をガリガリ書くぞ！と思っても相変わらずIEさんが邪魔です。。XP終了してもIE8以下さんという呪縛・・・。
私がCSS3で大好物（？）なのが角丸（border-radius）と複数背景画像です。
当サイトでも（特に本家ページの方）活躍しとります。
まあそのままだとやはりIEではむざんに直角で表示されたり背景画像が表示されなかったり・・・と自分のサイトながらヒドイもんでした＾＾；
いくつか対策はあるのですが、私が使用しているのはPIE.htcというbehaviorスクリプトです。
有名なのでご存知の方も多いと思いますが、念のためおさらい。
PIE.htcの基本の使い方
上記サイトからファイル一式をダウンロード
実際に必要なのはPIE.htcファイルだけです。
このPIE.htcファイルをサーバーにアップします。
当サイトはテーマディレクトリの中にjsフォルダがあるのでその中にアップしています。
■wordpressディレクトリ名「wordpress」、テーマフォルダ名「hoge」の場合
textarea{
width:400px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
-o-border-radius:4px;
-ms-border-radius:4px;
border-radius:4px;
border-color:#FFF;
padding:5px;
color:#333;
font-size:80%;
line-height:1.4;
behavior: url(/wordpress/wp-content/themes/hoge/js/PIE.htc);
}
基本の記述はこんな感じです。
これはフォームの<textarea>に角丸をつける場合の例です。
注意点は
●cssファイルから見たPIE.htcの位置で書く
●相対パスではなく絶対パスで書く（httpではなくスラッシュで書くそうです）
かな。。
これでborder-radiusやbox-shadowやグラデーションは大体表示されます。
が、複数の背景画像の場合の書き方が異なるのでちょいとめんどくさかったです。。
複数の背景画像をIEで表示させる
まあ気づけばどうってことないんですが、気づくまでが長かった。。。
背景画像のパスを相対でなく、これも絶対パスにすれば良いそうです。
■サンプル
header{
width:100%;
display:block;
background-image:url(./images/topbg_01.png),url(./images/topbg_02.png);
background-position:top left,top right;
background-repeat:no-repeat;
text-align:center !important;
overflow:hidden;
padding-bottom:0;
behavior: url(/wordpress/wp-content/themes/hoge/js/PIE.htc);
-pie-background:url(/wordpress/wp-content/themes/hoge/images/topbg_01.png) top left no-repeat,url(/wordpress/wp-content/themes/hoge/images/topbg_02.png) top right no-repeat;
position: relative;
}
IE以外の通常の書き方の時は相対パスで大丈夫ですが、IE向けの記述部分はPIE.htc同様スラッシュから始まる絶対パスです。
ちなみに一番下の行の「position:relative」はおまじないです。
これでIE8以下でも複数背景が表示されます＾＾
でも覚えておきたいPIE.htcの注意点
基本的にとても便利なPIEですが、万能ではありません。
万能なんじゃないかと勝手に思い込んで数ヶ月前にエラい目に遭った（爆笑）ので、自戒をこめて、自分以外にこんなヒドイ目に遭う人が出ないように無償の愛でPIEについてディスり注意点について記します！
1.（ほぼもう心配ないけど）XPでだとバグる
もう今は昔・・・状態ですが実はXP端末だとPIE.htcを使った部分がバグりました。
グローバルナビ部分のボタンにborder-radiusとbox-shadowとグラデーションをぶっこもうとしたのですが、クリックすると無関係の位置によくわからない矩形が現れ、いかにもバグっぽい様相を呈してたので泣く泣くPIE.htcをあきらめました・・・(T_T)
2.W3cのCSS上はinvalid扱い
これはCSSチェッカーの結果を気にする場合に重要ですが、PIEを反映させる以下記述がW3cのチェッカーではinvalidになります
behavior: url(/wordpress/wp-content/themes/hoge/js/PIE.htc);
Σ(ﾟДﾟﾉ)ﾉ
個人的にはヒジョーにここがひっかかったのですが・・・あれこれ考えるのもめんどくさくなったので（おい）割り切って受け入れてますw
一日も早く、PIEに頼らずとも全てのブラウザでCSS3がちゃんと表示される世の中になることを願います（壮大風w）