CSS

PIE.htcを使ってIEでもCSS3を有効に！

IEのCSS3対応

IEのCSS3への対応の遅さは異常！
せっかくCSS3を使えばコーディングがよりスマートに行えて、
画像の仕様を最小限に抑えて作業スピードもアップするというのに
未だに多くのシェアを誇るIEを無視するわけにはいきません。

そんなダメな子IEにもCSS3を適応させる方法はいくつかありますが、
やはり、「PIE.htc」を使う方法がベストだと思います。

 

PIEのインストール

ダウンロードは以下から行えます。
■CSS3 PIE: CSS3 decorations for IE

ダウンロードするといくつかのファイルが入っていますが、
基本的には「PIE.htc」を任意のフォルダに設置するだけ！
これで準備は完了です。

 

使い方

CSS3を適応させたい要素に対して以下のように呼び出すだけ！

#hoge {
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
behavior: url(“css/PIE.htc”);
}

これだけでIE6～IE9でも要素が角丸になります！
ここで注意していただきたいのは、パスはCSSファイルから見た相対パスではなく、
htmlファイルから見た相対パスで書く必要があることです。

これで有効になるのは、「border-radius」「box-shadow」「linear-gradient」等の一部だけですが、
よく使うプロパティなのでこれだけでも十分なくらいです。
またグラデーションを指定する「linear-gradient」は以下のように記述する必要があります。

#hoge {
background: -moz-linear-gradient(left center, #6a991a,
#d1e888 50%,
#6a991a);
background: -webkit-gradient(linear, left center, right center, from(#6a991a),
color-stop(0.5, #d1e888),
to(#6a991a));
-pie-background: linear-gradient(left center, #6a991a,
#d1e888 50%,
#6a991a);
behavior: url(“css/PIE.htc”);
}

それにしてもブラウザ毎にプロパティが増えるのはとても面倒くさいですね…。
統一される日は来るのでしょうか…。

関連記事