PIEを導入してみた。

 CSS3 PIE: CSS3 decorations for IE

 PIEとはprogressive internet explorerの略だそうでありまして、IE6〜8さんでもCSS3の幾つかのスタイルを適用できるようになるモノであります。CSS3といいますと、当ページでもついうっかりちょっとだけ導入していたりしますので、少し前から気になっておりました。
 ので、先日導入してみましたよ。

 JavaScript版も用意されていますが、今回は基本のHTC版をチョイスしてみました。だってHTCファイルとか扱った事もないから面白そうじゃん。ちなみにHTCのというのはHTML Componentsの略で、IE5のとき既に導入されていたものらしいです。実はMSさん新しいWeb技術に積極的に取り組んでいて、ajaxも広めたのはGoogleさんでありますけど、元々の生みの親はMSさんですし、これから扱うCSS3でのスタイルもMSさん由来のものがあったりもします。しかしながら、シェアを握り過ぎてしまったからなのかすっかりトーンを落としてしまって積極的にアピールせず、いつの間にかレガシーだと囁かれるように……。おっと、脱線。
 そのHTCファイルをアクセス可能な場所に置きCSSファイルから参照すれば、あとは普通にCSS3でスタイリングすれば同じように表示してくれるようになります。ただし、ちょっとだけ制限あったり違ったりします。

 当ページでは記事中の画像にドロップシャドウを付けていたりしますが、その場合ですと以下のようなスタイル設定になりました。


.entry > p > img {
    padding: 5px;
    border: 1px solid #cccccc;
    -webkit-box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.2);
    box-shadow: 2px 2px 10px 0px #ccc;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -pie-background: #ffffff;
    behavior: url(/site_media/css/2.0/PIE.htc);
}

 どうやらborder-radiusの場合は利き方にちょっと難がありまして、今回は断念しました。どうも要素自体にスタイリングするのではなくてボックス要素を別に作って角丸にするという実装のようで、そうすると画像の大きさに違いがある当ページの場合、適用するボックス要素の大きさを決めうちできないので表示が乱れてしまいます。写真に枠風のpaddingを取らずにそのまま角丸にするのも面白いと思いましたが、今回は枠風の表示の方を優先する事にした次第です。
 そのためwebkit系のブラウザならborder-radiusと書いただけで角丸になるのですけど、あえてPIEさんが反応しないように-webkit-border-radiusとベンダープレフィックスを付けざるを得なくなってしまって本末転倒という憂き目……。まぁ、いいか、とりあえずこれで。

 導入も適用も簡単だし、behaviorは独自要素ですけどスタイリング定義自体は標準のものなので、結構悪くないと思いますよ。特に角丸処理は人気が高いですから古めのIEでも使えればなぁと思っている向きにはいいかも知れません、IEといえばIE9になるまでのつなぎに。