Monthly Archives: 7月 2011

IE6-8でCSS3のセレクタやプロバティを使う方法

プログレッシブエンハンスメントが叫ばれる今日この頃ですが、
可能ならIE6-8にもCSS3を使いたい、ということでJSで何とかできないか探してみると、
なんだかよさげなものが見つかります。
■IE6でもCSS3のセレクタを使えるようにするもの
(1)IE9.jshttp://code.google.com/p/ie7-js/
IEの挙動を標準準拠させるjsライブラリ。一部のセレクタサポートの他、以下の項目をサポート。

・擬似クラス対応
・属性セレクタ対応
・透過PNG対応
・position:fixed対応
・margin:0 auto;対応
・max-height,width対応
・min-height,width対応
・IE5/6のバグを修正

いろいろ対応してくれてとても便利なIE9.jsですが、これを導入することで出来なくなることもあるようです。
[参考]ie9.jsを使うと出来ること、出来なくなること。
(2)selectivizr.jshttp://selectivizr.com/
jquery.jsやprototype.js等のライブラリと併用することで、IE6-8でもCSS3の擬似クラス・擬似要素を使えるようにしてくれるもの。使うライブラリによって対応する擬似クラス・擬似要素に違いが出るので事前に確認が必要。
↑これらを使うと、属性セレクタや、:before/:after、:first-child/:last-child等がIE6-8でも使えるようになるので、HTMLのソースコードがとてもシンプルに出来ますね♪
■IE6でもCSS3のプロパティを使えるようにするもの
(1)PIE.htchttp://css3pie.com/
たった位置行追加するだけで角丸、ドロップシャドウ、グラデーション、マルチプル背景等がIEでも使えるようにしてくれるbehavior。
(2)ie-css3.htchttp://fetchak.com/ie-css3/
角丸、テキストシャドウ、ボックスシャドウに対応。
.htcは大変便利なのですが、
・サーバによっては.htcを許可していないことがある
・相対パスで呼び出す場合、HTMLからのパスにしないと動かない
・要素にposition:relative;を指定しないと背景やボーダーが消える
などいくつか注意点がありますので気をつけてください。
で、こんな風にJSやhtcでセレクタやプロパティを使うことが出来るなら、
両方使ってやればIE6-8でもモダンブラウザライクにCSS3使えるんじゃね?
と思って意気揚々と設置・・・・・
・・・・・してみたのですが、ダメでしたorz
どうやら、セレクタ系のJSを読ませると、.htc系の指定が全部無効になってしまうみたいです。(つかえねーーー!!)
セレクタ系を取るか、プロパティ系を取るか、結局二者択一が精一杯みたいです。。。(´・ω・`)
残念。