《 17:20 公開/更新》
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」を使用する条件は、以下のような感じです。条件というほどのものでもありませんが。
JavaScriptライブラリは、jQuery・prototype・YUIなど有名どころに対応しています。ただし、使うライブラリによっては、一部のCSS3にしか対応できません。おそらく最も普及しているであろう「jQuery」では、nth-of-typeプロパティなどは使えないのが残念です。この辺は、CSS3の何を使いたいかによって選択する必要があります。
ちなみに、nth-childプロパティは、どのライブラリを選んでも使用可能です。
また、HTMLソース中に、style属性などを使って記述したCSSソースは認識してくれないので注意が必要です。
まあ、これはさほど問題ということはないと思いますが。CSSソースは独立ファイルにしておき、link要素を使って読み込むことが必須です。(※Selectivizrを使う必要があるCSSの場合は。)
使い方(設置方法)はとても簡単で、下記の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」が便利ですよ、という話でした。
()
▼当サイト内外で関連しそうな記事などが自動表示されています。(たぶん)