いつもためになるツールや手法を紹介しているコリスさんでも紹介されていた「CSS3 PIE」がすごく良い感じだったのでご紹介。
このPIE、Progressive Internet Explorerの略で、Internet Explorer 6、7、8でサポートされていないborder-radiusやbox-shadowなどのCSS3の機能を実現するためのスクリプトです。シンプルかつCSS3の仕様に準拠した指定方法で実装できるところがすごく良い感じです。
FirefoxをはじめSafariやChromeなどのモダンブラウザの最新版ではCSS3のサポートが充実しているので、それを活用しない手はない。が、ターゲットとするユーザ層によってはIEが大きな足かせとなる。
それをシンプルに解決してくれるのが、この「CSS3 PIE」です。
※僕が担当しているウェブサイトはなぜかIE6が無視できないシェアをほこります…涙。なので、こういったツールはすごくありがたい。。。
PIEでIE8、IE7、IE6に実装できるCSS3機能
- border-radius
- box-shadow
- border-image
- multiple background images
- linear-gradient as background image
PIEの実装方法
- スクリプトをPIEのウェブサイトからダウンロード
- ファイルを解凍して「PIE.htc」をサーバに設置
※JavaScript版もあるみたいです - IE6〜8向けにCSS3を指定したい部分のCSSに以下を追加
[css highlight=”5″]
.round-button {
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
behavior: url(path/to/PIE.htc);
}
[/css]
これだけです！
PIEを使用する際の注意点
PIEウェブサイトの「Known Issues」のページにも書かれていますが、PIEを使用する際は以下のようなことに注意する必要があります。
- CSS3なしのレイアウトが一瞬表示されます。たとえば、border-radiusを指定した場合、はじめに四角いコーナーが表示されて、その後に丸角で表示されます。
- CSS3を適用したい要素に「position: relative」もしくは「position: relative」と「z-index」を指定する必要がある
- behavior: url(…)で指定するパスは、絶対パス、またはCSS3を適用したいページのHTMLからの相対パスで指定する必要がある
- Shorthandしか使えません。たとえば、border-top-left-radiusは使えません。
- など…
まとめ
IE9が今年 (2011年) 4月に公開されて、CSS3のサポートもだいぶ充実してきましたが、IEのシェアはまだIE8が多いというウェブサイトも多いのではないでしょうか？IE6、IE7からのアクセスはかなり減ってきているのでサポート外とするとしても、IE8はサポートしたい。そんなケースも多いと思います。
そんななか、サイト最適化やCSS3をサポートするブラウザが大半を占める近い将来のことを考えたら、グラデーションやラウンド・コーナーを実装するのに背景画像を使うよりはCSS3で実装したい。そんな際に、とてもありがたいソリューションだと思いました。
しかし、そろそろIE6は消滅しても良いと思うのですが…
2011年8月12日に公開され、2012年4月28日に更新された記事です。
About the author
「明日のウェブ制作に役立つアイディア」をテーマにこのブログを書いています。アメリカの大学を卒業後、ボストン近郊のウェブ制作会社に勤務。帰国後、東京のウェブ制作会社に勤務した後、ウェブ担当者として日英バイリンガルのサイト運営に携わる。詳しくはこちら。
ウェブ制作・ディレクション、ビデオを含むコンテンツ制作のお手伝い、執筆・翻訳のご依頼など、お気軽にご相談ください。いずれも日本語と英語で対応可能です。まずは、Mastodon @rriver@vivaldi.net 、Twitter @rriver 、またはFacebook までご連絡ください。