（ちょっとメモ）IEにもCSS3の機能を使えるようにする「CSS3 PIE」

CSS3 PIE は、JavaScriptによってIE6〜8にCSS3の表現をさせるものです。

http://css3pie.com/

トップページでフォームに数値を記入すると、リアルタイムで変化し、「Show CSS」をチェックするとCSSも見ることができます。

対応しているプロパティはこちら。（2011年8月19日現在）

• border-radius（角丸）
• box-shadow（ボックスシャドウ）
• linear-gradient（線形グラデーション）
• border-image（ボーダーに画像を表示させる）
• multiple background images（複数の画像を背景に指定させる）

「CSS3 PIE」を使ったサンプルファイルを作りましたので、IE6〜8で見てみてください。

「CSS3 PIE」の使い方

1.まずはダウンロード（本記事を書いている時点では、Ver.10beta4でした。）
「CSS3 PIE」トップページの右カラムに「Download」がありますので、Zipをダウンロード。

2. Zipを展開して「PIE.htc」のみをアップロード
「PIE.htc」ファイルのみを使用するサーバにアップロードします。他のファイルは不使用です。

3. CSSに「PIE.htc」の2↑でのアップロード先URLを追加

例えば、ボックスシャドウだったらこのように追加します。
最後に書くのがミソ。（標準型の書き方の後に書きます。）

div {
  -webkit-box-shadow: 15px 15px 10px #999; /*←ベンダープレフィックス付き*/
  -moz-box-shadow: 15px 15px 10px #999;    /*←ベンダープレフィックス付き*/
  box-shadow: 15px 15px 10px #999;         /*←標準型*/
  behavior: url( /*PIE.htc のアップロード先のパス*/ );
}

パスの書き方は、トップレベルドメインを省略して「/」で始まる書き方で指定します。

例えば「PIE.htc」を「 http://www.○○○.com/PIE.htc 」にアップロードしたのなら、
「http://www.○○○.com」を省略して url(/PIE.htc) と記述します。
または「 http://www.○○○.com/xxx/PIE.htc 」に置いたなら url(/xxx/PIE.htc) と書きます。

括弧 () の中のURLを「 " " （ダブルクォーテーション マーク）」で囲みたくなりますが、NG。 括弧 () の中にじかにURLだけを書きます。

相対URLで書いてもOKですが、複数のHTMLファイルから使うこともあるので 絶対URL で書いておいたほうが良いと思う。

最後に注意点です

これらはマジで重要。守らないと動作しません。

• 標準のCSS3の記述（ベンタープレフィックス無しの）を書かなければ「PIE.htc」は効果を発揮できません。
• 色は16進法で指定（「black」などの「色名での指定」は使ません。#000または#000000と書きましょう。）
• うまくいかない場合は「position: relative;」を追加してみます。behaviorで「PIE.htc」を指定した結果の不具合を、positionプロパティで解決できる場合があります。

  div {
  	background: #ffc;
  	-webkit-border-radius: 10px;
  	-moz-border-radius: 10px;
  	border-radius: 10px;
  	behavior: url( /*PIE.htc のアップロード先のパス*/ );
  	position: relative;
  }

• グラデーションの場合だけは、もう1行、独自のプレフィクス「-pie-」を使用した記述が必要。

  div {
    background: -moz-linear-gradient(top, #FF9, #9C0);
    background: -webkit-gradient(linear, left top, left bottom, from(#FF9), to(#9C0));
    background: linear-gradient(top, #FF9, #9C0);
    -pie-background: linear-gradient(top, #FF9, #9C0);
    behavior: url( /*PIE.htc のアップロード先のパス*/ );
  }

• サーバによっては、.htaccessファイルに AddType text/x-component .htc の1行を追記しないと、動作しないこともあるそうです。