たった一行を追加するだけでIE6/7/8をCSS3対応にする -CSS3 PIE

IE6/7/8でもCSS3の角丸、ボックスシャドウ、グラデーション、マルチバックグランドなどを使えるようにするbehaviorスクリプトを紹介します。

CSS3 PIE_ CSS3 decorations for IE
デモ

デモではCSS3の角丸、ボックスシャドウ、グラデーションをリアルタイムに試すことができます。

IE7でのキャプチャ
CSS3が美しく適用されています。

上記は「CSS3 PIE」を使用した状態で、「Enable PIE 」のチェックボックスをオフにすると無効の状態になります。

「CSS3 PIE」をオフにしたキャプチャ
角丸もグラデーションも無しの状態になりました。

「Show CSS」のチェックボックスをオンにすると、現在のスタイルシートが表示されます。

上記デモのスタイルシート
※クリックで拡大

「CSS3 PIE」の使い方は簡単で、既存のCSS3のスタイルシートに一行を追加するだけです。

適用前のCSS

「CSS3 PIE」を適用

既存のスタイルシートの最後に、behaviorスクリプトとして「PIE.htc」を指定します。

「PIE.htc」は下記ページよりダウンロードできます。
PIE download

「CSS3 PIE」がサポートしているCSS3のプロパティは下記の通りで、他のプロパティへの対応も開発中ということです。

• border-radius
• box-shadow
• border-image
• multiple background images
• linear-gradient as background image

以前紹介した「IE-CSS3」よりも対応しているプロパティが多く、シャドウも綺麗に表示されていると思います。