IE6～8でもCSS3セレクタが利用できるツールの決定版「Selectivizr」

Selectivizrの設置方法

ここで提供されているselectivizr.jsとJavaScriptライブラリを外部ファイルで読み込むだけで、CSS3セレクタがIE6～8でも利用可能となります。コードも外部ファイルを読み込むだけですのでとてもシンプルです。

<script type="text/javascript" src="[JSライブラリ]"></script>
<!--[if (gte IE 6)&(lte IE 8)]>
  <script type="text/javascript" src="selectivizr.js"></script>
<![endif]-->

最初はJavaScriptライブラリの設定ですので、jQueryやprototypeなどのjsライブラリを元々使っている場合は2～4行を追加するだけで大丈夫です。

jsライブラリによって対応できるセレクタが違う

このように使用するjsライブラリによって対応できるCSS3セレクタも違ってきます。使えるjsライブラリは次のとおりです。

• jQuery
• Dojo
• Prototype
• YUI
• MooTools
• DOMAssistant
• NWMatcher

CSS3セレクタについて

例えば下のセレクタ一覧で最初にあるE[foo^="bar"]（foo属性の値がbarで始まっているE要素） というのは具体的には以下のようになります。

a[href^="http"] {
  color:red;
}

href属性の値がhttpで始まっているa要素に対してスタイルが適用されます。というわけで、このようなリンクには適用されます。

<a href="http://weboook.blog22.fc2.com/">リンク</a>

で、このようなリンクには適用されません。

<a href="index.html">リンク</a>

CSS3セレクタ一覧

Selectivizrの注意点

jsライブラリはGoogle Libraries APIでも大丈夫

私は普段Google Libraries APIのjQueryを使っています。こんな感じですね。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

もちろんこれでもちゃんと動きます。

CSSは外部ファイルに記述する

Selectivizrは外部ファイルでCSSを指定しないと機能しません。

head内に記述せず、外部ファイル内でCSSを記述しましょう。

ローカルでは動かない

サーバにアップしないと動きません。ローカルで試したけど動かないので諦めるなんてことがあったらもったいないですね。