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

公開: 2014-07-03 21:35
更新: 2016-04-29 06:02
みんなの敵IE。
未だにIE8に対応してというお話が来ますね。
まだまだシェアがあるので仕方がないのですが。
PIE.htc
どうやらIE6,7は滅んだようね。



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


何はともあれまずはこちらからダウンロードしましょう。
http://css3pie.com/download/
PIE.htc
そしたら中に「PIE.htc」というものが入っているので
今回はこんな感じで設置します。
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/


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


この記事をシェア
この記事にコメントする
書き込む
あっきぃ(@appstars_aki)
Web、iOSなフリーランサーです。好きなものはお寿司です。でもお寿司は高いので普段は雑草とか拾ったドングリを食べています。お仕事や意味もなく毎月お小遣いをくれる人を探してます。

お仕事の依頼や自分で作ったアプリのレビューを希望しちゃう方はaki@appstars.jpまでご連絡ください。