スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

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

CSS3セレクタを使う上で問題となるのはやはりIEです。HTML5 & CSS3 Supportで確認すると、IE6~8はほとんど対応できていないことが分かります。

そんなIEでもCSS3セレクタを使えるようにするのがSelectivizr.jsです。詳しく紹介されているサイトがあまりなかったのでご紹介。

selectivizr02.png

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ライブラリによって対応できるセレクタが違う

selectivizr02.png

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

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セレクタ一覧

セレクタパターン意味
E[foo^="bar"] foo属性の値がbarで始まっているE要素
E[foo$="bar"] foo属性の値がbarで終わっているE要素
E[foo*="bar"] foo属性の値にbarを含むE要素
E:root 文章内のルート要素であるEという要素
E:nth-child(n) 親要素のn番目の子要素
E:nth-last-child(n) 親要素の後から数えてn番目の子要素
E:nth-of-type(n) 兄弟関係にあるn番目のE要素
E:nth-last-of-type(n) 最後から数えてn番目にある要素
E:last-child 最後にある子要素
E:first-of-type 兄弟関係にある最初のE要素
E:last-of-type 兄弟関係にある最後のE要素
E:only-child 唯一の子要素であるE要素
E:only-of-type 兄弟関係にあるE要素
E:empty 子要素を持たないE要素
E:target 参照URIの目標となっているE要素
E:enabled有効になっている(:enabled)E要素
E:disabled 無効になっている(:disabled)E要素
E:checked ラジオボタンやチェックボックスがチェックされた状態のときにE要素
E::selection ユーザが選択したE要素の一部
E::before E要素の内容の前
E:not(s) sでないセレクタを持つE要素
E ~ F E要素の後にあるF要素

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を記述しましょう。

ローカルでは動かない

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

CSS3について回るIE対策ですが、Selectivizrのおかげでセレクタはプロパティに比べ対応が容易です。セレクタ自体の詳しい説明は別の機会にしてみたいと思います。
フィードやTwitterで最新情報をチェック
follow us in feedly
この記事に付いているタグの最新記事一覧
loading...
コメント









※コメントはご意見ご感想や間違いのご指摘等にしていただけますようお願いいたします。コメントを確認する時間がなく、技術的なご質問をいただいても答えできません。申し訳ございませんがご理解のほどお願いいたします。

Recent Entry
Popular Entry
  • このエントリーをはてなブックマークに追加
  • このエントリーをはてなブックマークに追加
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。