にしし ふぁくとりー:西村文宏 個人サイト

"CSS Tips Factory" : Presented by Nishishi. Since 1997.

CSS3を使ったページでIE6~8にも対応させるにはSelectivizrが便利 [CSS3]

CSS3では、かなり便利な「セレクタ」・「疑似クラス」・「擬似要素」が仕様に加わりました。
しかし、当然ながらそれらの新しい仕様は、古いブラウザではサポートされていません。

古いバージョンであっても利用され続けている可能性の高いブラウザに、Internet Explorerがあります。
Windowsに標準インストールされているIEは、今でこそ自動アップデート機能がありますが、以前はWindows Updateから手動で導入するしかありませんでしたし。しかも、世界中に普及していたWindows XPでは、IE8までしかアップグレードできません。

さすがにXPユーザは徐々に減っていくだろうとは思いますが、まだユーザが多いことも事実です。
CSS3を使う上では、IE8対策をどうするかが悩ましい問題として存在します。

そんなときに便利なのが、「Selectivizr」です。
このスクリプトをIE8以下に対して読み込ませるようHTMLを記述しておくだけで、IE6~8でCSS3の各種セレクタ・疑似クラス・擬似要素(の一部)が利用可能になります。
スクリプトファイル1つを読み込ませておくだけで良いので、とても楽です。読み込むスクリプト本体はわずか4.72KBしかありませんから、ページの読み込みが大きく遅くなることもありません。条件付きコメント機能を使ってIE8以下の場合だけに読ませれば良いので、他のブラウザに悪影響を及ぼすこともありません。

というわけで、古いIEに対するCSS3対策を手っ取り早く施すには、Selectivizrがとてもお勧めです。

Selectivizrを使って、IE6~8でもCSS3を使えるようにするための条件

「Selectivizr」を使用する条件は、以下のような感じです。条件というほどのものでもありませんが。

  • 別途「jQuery」や「prototype」などのJavaScriptライブラリの読み込みが必須
  • CSSソースは、独立したファイルに格納し、link要素を使って読み込む必要がある

JavaScriptライブラリは、jQuery・prototype・YUIなど有名どころに対応しています。ただし、使うライブラリによっては、一部のCSS3にしか対応できません。おそらく最も普及しているであろう「jQuery」では、nth-of-typeプロパティなどは使えないのが残念です。この辺は、CSS3の何を使いたいかによって選択する必要があります。
ちなみに、nth-childプロパティは、どのライブラリを選んでも使用可能です。

また、HTMLソース中に、style属性などを使って記述したCSSソースは認識してくれないので注意が必要です。
まあ、これはさほど問題ということはないと思いますが。CSSソースは独立ファイルにしておき、link要素を使って読み込むことが必須です。(※Selectivizrを使う必要があるCSSの場合は。)

Selectivizrを読み込んで、IE6~8でもCSS3を利用可能にする

使い方(設置方法)はとても簡単で、下記のSelectivizr公式サイトにアクセスして、DOWNLOADボタンからZIPファイルをダウンロードして、「selectivizr-min.js」ファイルを抜き出し、それを自サイトにアップロードするだけです。

Selectivizr – CSS3 pseudo-class and attribute selectors for IE 6-8

ZIPファイルの中には、更新ログと、「selectivizr.js」(オリジナル版)と、「selectivizr-min.js」(短縮版)の3ファイルが入っています。
どちらを使っても構いませんが、「selectivizr-min.js」ならサイズは4.72KBとかなり小さいので、特に不都合がなければそちらを使っておけば良いでしょう。

従って、HTML内に以下の1行を記述することで読み込めます。

<script type="text/javascript" src="./selectivizr-min.js"></script>

上記の1行だけだとIE以外のブラウザでも読み込んでしまって無駄なので、以下のように条件付きコメント機能を使って記述することで、IE8以下の場合にだけSelectivizrが読み込まれるように記述する方が良いでしょう。

<!--[if lte IE 8]>
<script type="text/javascript" src="./selectivizr-min.js"></script>
<![endif]-->

これだけです。
簡単ですね。
※別途jQueryなどのJavaScriptライブラリを読み込ませる必要がありますから忘れないようご注意下さい。(上記のソースには含まれていません。)

Selectivizr公式サイトでは、JavaScriptが無効化されている場合の対策も含めて以下のように記述されています。が、さすがにもはやそこまで気にしなくても良いんじゃないかな、とも思います。(^_^;)

<!--[if lte IE 8]>
<script type="text/javascript" src="./selectivizr-min.js"></script>
<noscript><link type="text/css" rel="stylesheet" href="IfNoScript.css"></noscript>
<![endif]-->

というわけで、CSS3を活用したウェブページで、IE8以下のブラウザにも対応させたい場合には、「Selectivizr」が便利ですよ、という話でした。


()

スタイルシートTipsふぁくとりーの主要なカテゴリ

下記のカテゴリに区分して、スタイルシートに関するTIPSを公開しています。カッコ内の数字は、該当する記事の件数です。

著者紹介


にしし(西村文宏)

にししでございます。本書いたり記事書いたりしてます。あと萌えたり。著書5冊発売中です(Web製作系4冊+小説1冊)。著書や記事は「西村文宏」名義。記事は主にAll Aboutで連載。本の最新刊は2011年3月に発売されたライトノベルでございますよ。

Twitter:にしし/西村文宏
にしし/西村文宏 on facebook にしし/西村文宏 on mixi フォローはお気軽に!

にしし(西村文宏)連絡先
☕ コーヒーをおごる

著書一覧と詳細

関連するかもしれない情報

▼当サイト内外で関連しそうな記事などが自動表示されています。(たぶん)

--- 当サイト内を検索 ---