CSS3 PIE（PIE.htc）の使い方と注意点まとめ

CSS3をIE6～8でも機能させる事が出来るbehaviorスクリプトの『CSS3 PIE』

CSS３ PIEを使用する事で、IE６〜８においても以下のスタイルを適用する事ができます。

• border-radius（ボックスを角丸にする）
• box-shadow（ボックスに影をつける）
• border-image（境界線に画像を使用する）
• multiple background images（背景に最大４つの画像を使う）
•  linear-gradient as background image（背景にグラデーション）

ちなみに、opacityやtext-shadowは使用出来ません。

１行追加するだけの簡単なコードで、IE６〜８にもCSS3が適用され、
他の似たような機能のスクリプトよりも対応しているスタイルが多い事で、人気のスクリプトですが、実際使用してみると思いのほか上手く行かない！なんて人も多いのではないでしょうか？？

『CSS3が適用される』と言ううたい文句ではありますが、
実際には『"CSS3風"のスタイル表示がIEでも表現できます』という意味合いに近く
モダンブラウザでコーディングするように使用すると、意外な所で痛い目に合います。

かくいう私も、CSS3 PIEのおかげで半日程潰されました。。

「CSS3 PIE」で調べればいくらでも解説のサイトはありますが、
備忘録の意味も含めて、私もまとめをメモしておきます。
 
※11/06/17一部追記致しました。

CSS3 PIE（PIE.htc）の使い方

■CSS3 PIEのダウンロード

CSS3 PIEは以下のサイトからダウンロード出来ます。
CSS3 PIE_ CSS3 decorations for IE

ちなみに、このサイトでそのままデモの確認も出来ます。

■使用方法

細かい注意点は後述しますので、まずはサイトが説明している方法の通りに。

・ダウンロードした「PIE.htc」ファイルをサーバー上に配置します。

・「CSS3 PIE」を適用したいスタイルの最後に、behaviorスクリプトとして「PIE.htc」を指定します。

#style {
･･･
behavior: url(PIE.htc);
}

※CSS3 PIEのサイト上のデモで「Show CSS」のチェックを入れることで
デモのデザインソースを表示する事ができます。

基本的にはこれだけ。

CSS3 PIE（PIE.htc）の注意点

ところが、そうは問屋がおろしません。
言われたとおりにやってるのに、思ったようにスタイルが当らない事があります。

そこで、CSS3 PIEを使用してスタイルを定義する際に注意すべき点を以下にまとめました。

１．「PIE.htc」のパス指定

CSSファイルに記入する「PIE.htc」へのパスは、CSSファイルからの相対パスではなく、
CSSを読み込んでいるHTMLファイルから「PIE.htc」への相対パスを指定する必要があります。

２．position:relative;の指定

グラデーションや、角丸等の特定の要素を使用する場合、CSS3 PIEを読み込んでいるセレクタに『position:relative;』が指定されている必要があります。
 (これがないと背景色が表示されなかったり、ボーダーが消えたりします。)

３．サーバーによっては「.htaccess」の設定が必要

サーバーの仕様によって動作しない場合があるので、その場合は「.htaccess」ファイルにて以下の設定が必要になります。

AddType text/x-component .htc 

４．グラデーションや、ボックスシャドウ等は一部独自定義

CSS3 PIEのデモのCSSソースを見ればわかりますが、一部プロパティはPIE独自の物もあるので注意が必要です。
現行のモダンブラウザ用に指定しているCSS3のコードがある場合に、そのままビヘイビアを追加しても、反映されない場合が多くあります。
その場合は現行のコードを元に、PIEのデモでコードを再度生成しましょう。

/* 例 */
/* ボックスシャドウ */
box-shadow: #666 0px 2px 3px;
/* グラデーション */
-pie-background: linear-gradient(#EEFF99, #66EE33);

５．filter: alpha(opacity=?)はキャンセルされる

IEの独自拡張である、filter: alpha(opacity=?)は打ち消されるようです。
ですので、背景の透過が効かなくなります。
ただし背景がtransparentの場合は透過するようです。

６．ボックスシャドウは透過しません

ボックシャドウの指定時に、アルファ値は無効となります。
ですので、薄い影をつけたい場合は、色で対応するしかありません。

７． ボックスシャドウと透過PNGは同時に使えない

CSS3 PIEでのボックスシャドウは、要素の裏側全体に適用されます。
そのため、透過PNGと組み合わせてボックスシャドウを使用する事ができません。
(正確には、透過した下の色がシャドウの色なので、変な事になる)
そのため、PIE適用時は、#ffffff等で背景色を塗りつぶしておく等の対策が必要があります。

８．総称セレクタ(*)に指定してみると、IEは固まる

…らしいです。
めんどくさがって、広い範囲に設定使用としてもダメみたいですね。

●11/06/17 追記

９．一部jQueryとの共存に不具合が生じる

maximageや、フローティングウィンドウ系の動きのあるjQueryと一緒に使用すると、
スタイルが思った位置にあたらなかったり、訳のわからない大きさになったりします。

これは私がモロにぶつかった問題でした、ネット上でも何名か悩んでる方がいらっしゃる模様。
原因は読み込みのタイミング等にあるようで、要素の位置や、大きさ等を動的に決めているとなりやすい印象です。

今の所、うまい解決方法は見つかっていません。
どなたか、似たような問題で解決方法をご存知であれば教えて頂けると嬉しいです！

結論

たしかに、IE6-8でCSS3ライクなデザインを可能にするCSS3 PIEですが、
『CSS3 PIEを使えば、IEでもモダンブラウザ同様にCSS３が使える！』
というレベルまではちょっと届いてないのかなぁ。という印象でした。

しかし、CSS3 PIEで出来ること、出来ない事をあらかじめしっかり把握しておけば、
とても便利なスクリプトには違いありません。
他の同様のスクリプトと比べても使い勝手は良い方だと思います。

WEB制作において、未だIEは無視する事のできないブラウザでありますが、
こう言ったツールを上手に使いこなし、より良いサイト制作を行っていきたいものです。

追記

先日IE9が正式にリリースされ、やっとIEでも多くのCSS３対応が行われましたが、
こう言ったハック的なスクリプトが問題にならないか少し心配ですね。
(一応今のところ問題無しな感じですが…)



参考サイト
http://coliss.com/articles/build-websites/operation/css/css3pie-decorations-for-ie.html
http://css.microrza.com/csstips/iecss_css3pie/
http://internet.designcross.jp/2010/11/css3-piepiehtc.html
http://unique-unique.net/css/css3/20110313100
http://blog.xaxxi.net/2010/11/04/css3-pie%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6%E3%81%BF%E3%81%9F/