[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

.pie_box {
width:200px;
height:200px;
text-align:center;
margin:0 auto;
padding:10px;
background:#fff;
border:1px solid #ccc;
box-shadow:3px 3px 3px #eee;
border-radius:6px;
behavior:url("/PIE.htc"); /*CSS3使っているプロパティの最終行にこの1行を追加*/
}

ちなみに

behavior:url("/PIE.htc");

は絶対パスで指定する必要があります。
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(ショートハンドプロパティ)

.bgs {
border:1px solid #ccc;
background:url(img/logo.png) 270px 300px no-repeat, url(img/bg_heart.png) right bottom no-repeat, url(img/bg_gunya.png) -15px 100px no-repeat;
}

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

.bgs {
background-image:url(img/logo.png), url(img/bg_heart.png), url(img/bg_gunya.png);
background-position:270px 300px, right bottom, -15px 100px;
background-repeat:no-repeat, no-repeat, no-repeat;
}

CSS3 PIE

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

.bgs {
behavior: url("/PIE.htc");
-pie-background:
url(img/logo.png) 270px 300px no-repeat,
url(img/bg_heart.png) right bottom no-repeat,
url(img/bg_gunya.png) -15px 100px no-repeat;
}

となります。

demo 確認はIE6～8で！

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