【css3】ie6/ie7/ie8でcss3を実現するPIE

今回ご紹介するのはなんと、ie6/ie7/ie8でcss3の（一部）サーポートを行えるという
超兵器のようなhtcファイル（中身はjavaScript）です！



■使い方-------------------------------

▼PIE site
http://css3pie.com/



①上記のPIEのサイト右の「Download」をクリックするとファイルをダウンロードできるので、
解凍してできたフォルダを適当名前（pieなど）にする。

②その後、自分のサーバにフォルダごとアップロード

③スタイルシートにてcss3のコードを記述

-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: #666 0px 2px 30px;
-moz-box-shadow: #666 0px 2px 30px;
box-shadow: #666 0px 2px 30px;
behavior: url(pie/PIE.htc);


ここでポイントとなるのが最後の行
「behavior: url(pie/PIE.htc);」です。

この「behavior」というプロパティですが
こちらはIE独自のものらしく、IEのみにファイルを読み込ませることができるらしいです。
ここで先ほどダウンロードしたPIE.htcを読み込んでいます。

ファイルのパスも特殊で、cssからの相対パスではなく、
このcssを読み込んでいるhtmlからの相対パスを記述する必要があります。 

 ようするに今回の場合はhtmlファイルとpieフォルダが同階層ということになります。



PIEの使い方は以上です。
PIEのサイトの方にcss3のジェネレーター（？）がありますので、
そのコードを貼り付けるだけで、ie6以降の全てのブラウザで角丸やドロップシャドウが実現できる・・・！

いい時代になったもんやで。



ちなみにこのサイトのトップページでテスト的に実装しています。

■注意-------------------------------

 ひとつ残念なのは、相変わらずオペラではグラデーションがサポートされておらず、
このPIEを使用してもグラデーションを描画することができないことです！


オペラめ・・・



それから最後に、
サーバによってはhtcファイルをデフォルトでは扱えない場合があるようで
その場合はhtcファイルと同じディレクトリに「.htaccess」をおいてあげる必要があります。

.htaccessの中身に
「AddType text/x-component .htc」
を記述してあげる。



▼参考サイト
htcが効かないサーバの場合