By Hoshino

0

IE8でも角丸やシャドウをかけたい「PIE.htc」

Categories : CSS , IE

みんなの敵IE。
未だにIE8に対応してというお話が来ますね。
まだまだシェアがあるので仕方がないのですが。

どうやらIE6,7は滅んだようね。

さて、
角丸とかボックスシャドウとかIE8では基本的に表現できません。
そんな理不尽な状況を打破してくれる素晴らしい奴。「PIE.htc」を紹介したいと思います。

何はともあれまずはこちらからダウンロードしましょう。
http://css3pie.com/download/

そしたら中に「PIE.htc」というものが入っているので
今回はこんな感じで設置します。

ちなみにHTCファイルとは「HTML Components ファイル」の略で、
これはIE5から導入され、色々リッチな表現ができちゃうすごいっぽい奴だそうです。(IEのみで)

PIE.htcの中はJavaScriptで書いてあるようなので、
興味のある方は中身を解読してみても楽しいと思います。

PIE.htcを設置したならばあとはこんな感じでCSSにちょい足しするだけです。

/* /css/main.css */
.corner {
        border: 1px solid #696;
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
        border-radius: 8px;
        behavior: url(/PIE.htc);
}

.shadow {
        -webkit-box-shadow: #666 0px 2px 3px;
        -moz-box-shadow: #666 0px 2px 3px;
        box-shadow: #666 0px 2px 3px;
        behavior: url(/PIE.htc);
}

これで試してみて角丸などが実現出来ていれば問題ありませんが、
効果が出ない場合はhtcファイルが読み込まれるように.htaccessに次の1行を追加しておきましょう。

#.htaccess
AddType text/x-component .htc

これでOK。

PIE.htcのホームページにDemoがあるので
「そもそもこのブラウザで表現できるのか?」ってのを確かめられます。
http://css3pie.com/

活用してみてください。
ではでは♪