2013/09/18

IEでCSS3が使える!「Selectivizr.js」と「CSS3 PIE」の使い方

IEでCSS3が使える!「Selectivizr.js」と「CSS3 PIE」の使い方

コーディングをする際、最新のブラウザだけに対応していればよし!という考えもありますが、職場の環境によっては、最新ブラウザに更新できない場合もあります。
CSS3を使ってコーディングをした場合、IE6,7,8には対応していないので使えるようにする必要があります。
今回ご紹介する「Selectivizr.js」と「CSS3 PIE」を使えば、CSS3から追加された新しいプロパティとセレクタをIEでも適用することができます!

※CSS3のセレクタについては前回の記事でまとめているのでご参照下さい。

目次

対応ブラウザの確認

まずはCSS3がどのブラウザに対応しているのかを確認しておきましょう。

【CSS3 & HTML5 Browser Support】

CSS3 & HTML5 Browser Support

引用:http://fmbip.com/litmus/

CSS3で追加されたプロパティ・セレクタの、ブラウザごとの対応状況を確認することができます。
とてもキレイでわかりやすくまとめられています。
これで見るとやはりIE6~8ではほとんど対応していないことがわかります。

Selectivizr.jsでCSS3セレクタに対応

セレクタを対応させるにはSelectivizr.jsを使用します。

ファイルのダウンロード

【Selectivizr.js】

Selectivizr.js

http://selectivizr.com/

まずはダウンロードした「selectivizr-1.0.2.zip」を解凍します。

解凍後の中身

selectivizr-1.0.2

使い方

「selectivizr-1.0.2」の使い方はとても簡単です。
「selectivizr-1.0.2」フォルダ内の「selectivizr.js」を読み込みます。

<head>~</head>内に以下のコードを記述します。

<!--[if lt IE 8]><script src="selectivizr.js"></script><![endif]-->

たったこれだけでIE6~8でCSS3セレクタが利用可能になります。

注意点

CSSは外部ファイルに記述

「selectivizr.js」を使う場合、CSSは外部ファイル内に記述しなければなりません。
<head>~</head>内にCSSを記述してしまうと機能しないので注意しましょう。

ローカルでは動かない

サーバーにアップしないと動きません。
ローカルでは機能しないので必ずサーバにアップして使用しましょう。

CSS3 PIEでCSS3プロパティに対応

CSS3プロパティを対応させるには「CSS3 PIE」を使用します。
しかしプロパティで使えるようになるのは一部なので、全てのCSS3セレクタが使用できるようになるわけではありません。

【CSS3 PIE】

CSS3 PIE

http://css3pie.com/

まずは「PIE-1.0.0.zip」をダウンロードして解凍します。

解凍後の中身

PIE-1.0.0

使えるようになるプロパティ

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

使い方

対応させたいセレクタに、以下のようなコードを記述します。

behavior: url(PIE.htc)

PIE.htcまでのパス指定に注意してください。

例をあげると、

div {
    background-color:#000;
    border-radius:10px;
    behavior:url(PIE.htc);
}

というように記述し、最後の行でPIE.htcファイルのパスを指定します。

border-radiusbox-shadowborder-imageについてはこの方法で対応できますが、multiple background imageslinear-gradient as background imageについては「-pie-」を頭につける必要があります。
以下のように記述します。

div {
    border-radius:10px;
    background:
    url(image1.jpg) no-repeat top left,
    url(image2.jpg) no-repeat center center,
    url(image3.jpg) no-repeat 100% 100%; 

    -pie-background:
    url(image1.jpg) no-repeat top left,
    url(image2.jpg) no-repeat center center,
    url(image3.jpg) no-repeat 100% 100%; 

    behavior:url(PIE.htc);
}

PIE.htcが動作しない場合は、以下のページで解決方法が載っています。

「CSS3PIE(PIE.htc)が効かないと思ったら」
http://css.microrza.com/csstips/iecss_css3pie/

関連記事

CSS3の新機能をご紹介!CSS3プロパティまとめ(サンプル付)
http://www.hp-stylelink.com/news/2013/08/20130822.php

Webデザイナーなら覚えておきたいCSS3セレクタ一覧
http://www.hp-stylelink.com/news/2013/09/20130912.php

まとめ

他にもCSS3対応のライブラリはありますが、私が一番使いやすいと思うものをご紹介しました。
CSS3プロパティは一部しか対応できないのが残念ですが、どちらもファイルをひとつ読み込むだけで使用できるのでとても手軽に使えます。
IEには本当に悩まされますが、この方法である程度対応することができるので是非使ってみてはいかがでしょうか。