[CSS3]IE6~8でもCSS3を使えるようにするCSS3 PIE

[CSS3]IE6~8でもCSS3を使えるようにするCSS3 PIE

全国数百万人(適当)のWEBクリエイターのみなさん!毎日「IEしねしねー」の呪文唱えてますか!
今日はそんな腐クリエイターさんたちのための情報ですよ!(今更・・・)

思いっきりCSS3が使えるIEは10・・・
しかし、UAシェアを見てみるとまだまだIE7~8、あるいは6もいるのが現状。
内容にもよりますが、IE全体のシェアも国内では半数を超えている状況。

よってプロのWEBクリエイターたるものIEを無視するわけにはいかず、CSS3を使わないわけにもいかないのです。

ケースバイケースでbox-shadowやborder-radiusなんかは切り捨てても(表示されなくても)良い場合もありますが、古いIEでも当然表示されたほうがいいですよね。

という訳でCSS3 PIEの登場です。

使い方は簡単です。
CSS3 PIEのパッケージをダウンロード、解凍してサーバーにアップロード、CSSにIE独自拡張のbehaviorを使ってパッケージ内のPIE.htcを指定するだけ。
使用するのはPIE.htcだけですのでアップロードはPIE.htcだけでOKです。

CSS3 PIEダウンロード

demo 確認はIE6~8で!

html

CSS3を使ってますぜ。

CSS

ちなみに

は絶対パスで指定する必要があります。
http://hogehoge.com/js/PIE.htc にPIE.htcを置いた場合、/js/PIE.htcと指定しなければいけません。
それと、ローカルでは動きませんのでサーバーにアップロードして確認してください。

サポートしているプロパティは

  • border-radius
  • box-shadow
  • border-image
  • multiple background images
  • linear-gradient as background image

になります。

また背景が消えてしまいますので、CSSの7行目にあるようにbackgroundの指定を忘れないように。

CSS3 PIEが効かないこともあるようです。
色んな方が対処法を書いていますので、そちらを参考ししてみてはいかがでしょう。
CSSstylesheet.jp CSS3PIE(PIE.htc)が効かないと思ったら

実際に使ってみての感想

色んなシーンで使ってみましたが、IE-CSS3よりもいいかな?
でも、どうしても使わなければってものでもないかな・・・
「IEしねしねー」って言ってるほうが楽しいかな。

2015年11月9日更新
この方法はIE互換モードでしか動かない・・・

別の方法を改めて記事にします。

ここからが本題

前回の記事「[CSS3]CSS3で背景画像を複数指定する!IE9以上」もIE6~8で実現できます。

標準のCSS3(ショートハンドプロパティ)

標準のCSS3(関連プロパティ)

CSS3 PIE

CSS3 PIEでは独自プレフィックスの-pie-backgroundというものがあります。
これを使って背景画像を複数指定するには

となります。

demo 確認はIE6~8で!

以上です。
これで少しは「IEしねしねー」って言わなくてもすみますね・・・言ってるほうが楽しいんですが・・・

スポンサーリンク
  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存
スポンサーリンク