ページ

ラベル IE対応 の投稿を表示しています。 すべての投稿を表示
ラベル IE対応 の投稿を表示しています。 すべての投稿を表示

2011年5月26日木曜日

CSS3 PIE(PIE.htc)の使い方と注意点まとめ


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

CSS3 PIEを使用する事で、IE6〜8においても以下のスタイルを適用する事ができます。
  • border-radius(ボックスを角丸にする)
  • box-shadow(ボックスに影をつける)
  • border-image(境界線に画像を使用する)
  • multiple background images(背景に最大4つの画像を使う)
  •  linear-gradient as background image(背景にグラデーション)
ちなみに、opacitytext-shadowは使用出来ません。

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

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

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

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