Webクリエイターネット

CSS

Internet Explorer9以前でもCSS3を使う

Category

CSS

サイト制作時、HTML5と共にCSS3を使う機会も増えてきました。
でも、やっぱりその障害となるのがCSS3の対応状況が遅れているInternet Explorer...。
Internet Explorer9では使えるCSS3のセレクタやプロパティがかなり増えましたが、バージョン6～8ではほとんど対応していないのが現状です。
そこで今回は、Internet Explorer6～8でもCSS3の一部の機能を実装することができる"CSS3 PIE"を紹介しようと思います。

Keyword：クロスブラウザ対応,CSS3 PIE

CSS3

CSS3 PIEで何ができるの？

CSS3 PIEは、Javascriptを使ってInternet Explorer6～8でも一部のCSS3を使えるようにするスクリプトで、よくあるJavascriptライブラリとは違い、”PIE.htc”というファイルで配布されている点です。”.htc”形式は、HTMLコンポーネントファイル形式のことで、この”PIE.htc”ファイルをInternet Explorerの独自拡張であるbehaviorプロパティの値に指定してやることで、バージョン6～8でも一部のCSS3を実装可能にしたものです。
それほどCSS3に対応したプロパティが多い訳ではありませんが、十分使うに値する機能を実装しています。何ができるかというと、角丸、ボックスシャドウ、グラデーション等のWebデザインではよく使う効果をCSS3で実現することができます。

●CSS3 PIEがサポートしているCSS3のプロパティ
・border-radius･･･角丸
・box-shadow･･･ボックスシャドウ
・border-image･･･画像ボーダー
・multiple background images･･･複数背景の設定やレイヤー化
・linear-gradient as background image･･･グラデーション

CSS3 PIEの使い方

まず、以下のサイトより”CSS3 PIE”をダウンロードします。
⇒ CSS3 PIEダウンロードページ
※サイトの右側にある”Download”ボタンよりダウンロードしてください。

ダウンロードしたzipファイルを解凍すると、以下のような構造になっています。

PIE.htc

実際にCSS3 PIEで使用するのは”PIE.htc”だけです。
それでは、簡単なデモを作ってみましょう。
角丸、ボックスシャドウ、グラデショーンがInternet Explorer9以前でも表示されるか見てみます。必要なファイルは以下となります。

●CSS3 PIE実装に必要なファイル
・HTML･･･表示用
・CSS･･･CCS設定用
・PIE.htc･･･CSS3 PIE実装用
・.htaccess･･･PIE.htcがサーバーで動作しない場合に使用

CCSを作成する

CSS

.bt {
        font-size: 18px;
        font-weight: bold;
        color: #757575;
        border: 1px solid #77B8FF;
        padding: 30px;
        text-align: center;
        width: 200px;
    /* 角丸の半径 */ 
        border-radius: 15px;
    /* ボックスシャドウ */
        box-shadow: #666 1px 1px 5px;
        background: #99CAFF;
    /* グラデーション */
        background: linear-gradient(#99CAFF,#D2E5F9);
        background: gradient(linear,0 0,0 bottom,from(#99CAFF),to(#D2E5F9));
        background: -webkit-gradient(linear,0 0,0 bottom,from(#99CAFF),to(#D2E5F9));
    /* CSS3 PIE独自プレフィックス */
        -pie-background: linear-gradient(#99CAFF, #D2E5F9);
    /* behaviorスクリプトPIE.htcのパス */
        behavior: url(/demo/PIE.htc);
}

説明

●角丸の半径
角丸の半径をpxで指定してやります。
IllustratorやPhotoshopを使用されている方なら”半径”という表現は分かりやすいのではないでしょうか？

●ボックスシャドウ
シャドウの色、X軸のオフセット(+で右方向、-で左方向)、Y軸のオフセット(+で下方向、-で上方向)、シャドウのぼかし具合(数値が大きい=ぼかし具合も大きい)の順番で記述していきます。

●グラデーション
“linear-gradient~”はmozilla系ブラウザの記述で、グラデーションのトップカラー、ボトムカラーの順番に記述していきます。
“gradient(linear~”はwebkit系ブラウザの記述で、開始位置(left topでもOK)、終了位置(left bottomでもOK)、グラデーションのトップカラー、ボトムカラーの順番に記述していきます。
合わせて、iPhoneやAndroid端末用にwebkit系ブラウザ用のベンダープレフィックスも追記します(※理由は後ほど説明します)。

●CSS3 PIE独自プレフィックス
これはどういう意味かというと、現状ではInternet Explorer9でもグラデーションのプロパティには対応していませんので、”-pie-“といったCSS3 PIEの独自プレフィックスを追加することで、Internet Explorer6～9でもCSS3のグラデーションを適応することができます。CSS3 PIEの独自プレフィックス”-pie-“を追加してやらないと、Internet ExplorerではCSS3を使ったグラデショーンは表示できませんので、注意してください(※バージョン10では対応されると思います)。

●behaviorスクリプトPIE.htcのパス
PIE.htcのパスをドキュメントルートからのパスで指定してやります(※上記の場合ですと、”ドメイン/demo/PIE.htc”ということになります)。
注意点としては、相対パス(../demo/PIE.htc等)では、扱いにくいといった点です。
どういうことかというと、通常CSSを外部ファイルとして記述する場合、”CSSファイルからのパス”となるのですが、”表示ファイルからのパス”でないとPIE.htcを読み込んでくれないようです。”表示ファイルからのパス”だと全ページで使い回したい場合に不便ですので、ドキュメントルートからのパスで指定しましょう。
※絶対パス”http://www～”指定では、PIE.htcを読み込んでくれないようです。

●CSS3の書き方がよく分からない場合は…
CSS3を使い始めたばかりで、書き方がよく分からない場合は、CSS3 PIEのデモツールが便利です。以下ページへアクセスします。
⇒ CSS PIEデモ

角丸、ボックスシャドウ、グラデーションのみの記述でよければ、デモツールでCSS3のソースを自動生成してくれます(※border-imageやmultiple background imagesプロパティは、自分で追記しましょう)。

必要な項目を入力し、”“にチェックを入れるだけです。
デモツールは、ベンダープレフィックスも記述しますので、後ほどソース軽量化も兼ねたベンダープレフィックスを書かなくてもよい方法を紹介します。

HTMLを作成する

HTML

<!--作成したCSSを外部ファイルとして読み項込む-->
<head>
<link href="css/common.css" rel="stylesheet" type="text/css" />
</head>

<!--HTMLの要素にクラス(もしくはID)を指定する-->
<p class="bt">button</p>

説明

HTMLの作成といってもいたって簡単。作成したCSSを外部ファイルで読み込み、適応したいHTMLタグにクラスかIDで指定してやるだけです。

●CSS3のベンダープレフィックスを省略してソースを軽量化する
今回は、前回の記事でも紹介した”ベンダープレフィックスを自動で追加してくれるPrefix free”を使用し、記述の手間を省くとともに、ソースの軽量化を図ります。
“prefixfree.js”を外部ファイルとして読み込みます(ヘッダーに以下を追記)。
<script src=”js/prefixfree.js” type=”text/javascript”></script>

一つ注意点があります。
iPhoneやAndroid端末のブラウザでもグラデーションを反映させたい場合、”gradient(linear~”の前にベンダープレフィックス(-webkit-)を追記してください。理由としては、Prefix freeが対応しているブラウザのバージョンとスマートフォンのMobile SafariやAndroid Browserで対応状況が異なるためです。Opera Mobileにも対応させたい場合、ベンダープレフィックス”-o-“も追記した方がよいかもしれません。

[2012.9.18追記]
Prefix freeの2012.9.18時点の最新バージョン1.0.7では、スマートフォンの以下のブラウザも対応されるようになりました。
Mobile Safari・Android Browser・Chrome Mobile・Opera Mobile。
ですが、一部のシミュレーターでは対応していないようです(※実機・シミュレーター共に反映させたい場合、ベンダープレフィックスを付ければ両方共に反映されます)。

ベンダープレフィックスとPrefix freeの詳細は、以下の記事をご参照ください。
⇒ CSS3のベンダープレフィックス

.htaccessに以下を追記

.htaccess

AddType text/x-component .htc

説明

もしCCS3 PIEがうまく動作しない場合、.htaccessに上記を記述します。
使用しているサーバーが”.htc”拡張子のファイルを読み込むことができる設定になっていない場合、PIE.htcが動作しませんので、そのための記述です。

これでも、CCS3 PIEがうまく動作しない場合、以下も試してみてください。
behaviorプロパティを使ってPIE.htcを指定した際、一部のCSS3のスタイルが無効になる場合があるようです(当環境では大丈夫でした)。一部のスタイルが無効化されているなら、behaviorプロパティを使っている箇所に“position: relative;”を加えることで回避できるようです(※様々なサイトで同じような現象が報告されているようです)。

上記まで終了したら｢HTML｣｢CSS｣｢PIE.htc｣｢.htaccess(必要な場合のみ)｣をサーバーにアップロードします。Internet Explorer7～9で確認した結果、全て同じように表示されました(※バージョン6は確認していませんので、あしからず)。バージョン7と8でもCSS3が適応されているようです。また、バージョン9でも未対応のグラデーションが7～9全てに適応されています(CSS3 PIE独自プレフィックス、なかなかです！)。

Internet Explorerの表示イメージ

デモ版も用意しましたので、”Demo Pageボタン”よりご覧いただけます。
各バージョンで表示を確認したい場合、Internet Explorerの開発者ツールが便利です！
以前の記事でも紹介していますので、よかったらご覧ください。
⇒ Internet Explorerでのブラウザチェックにおすすめのツール

Demo　Page

CSS3 PIEの2012.3.4時点の最新バージョンは、ver.1.0beta5です。
他のCSS3のプロパティ対応も開発しているそうですので、他のプロパティも使えるようになるかもしれません。Internet Explorerが原因でCSS3の使用を躊躇されている方がいらっしゃるようでしたら、一度使ってみてはいかがでしょうか？

[2012.6.1追記]
2012.5.15、CSS3 PIE初のメジャーバージョンとなるver.1.0.0が公開されました(“beta”の文字が取れてますね)。

ver.1.0.0では以下が修正されています。
・box-shadowレンダリングのdivide-by-zeroエラー
・ホバリング後、エレメントを削除した時に出るエラー
・IE9の印刷時エラー
・IE7およびIE8でブラウザズームを使用した時のレンダリング

また、カスタムプロパティとして以下のプロパティが追加されています。
・Hover tracking(-pie-track-hover)
・Active tracking(-pie-track-active)

List

関連記事(※当記事と関連性が高いと思われる記事)

CSS3のベンダープレフィックス

2012/03/03
ベンダープレフィックス
スコア：18　※スコアの数値が大きいほど、関連性の高い記事です。 ベンダープレフィックス ベンダープレフィックスとは、仕様策定途中のCSS3のプロパティや値を各ブラウザが先行実装している場合、それらの機能を動作させるためにプロパティや... 続きを読む...

おすすめ書籍･商品(※当記事と関連性が高いと思われる書籍･商品)

ページの先頭へ