先日のエントリー「現在公開されているブラウザのCSS3対応状況」でIEのCSS3に対するやる気の無さが垣間見えましたが、
そんなIEに対してCSS3のプロパティを有効にするスクリプト「ie-css3.htc」というものがあったのでご紹介。
≫Kick-ass CSS3 Support in IE6, 7, and 8 | AEXT.NET MAGAZINE
≫デモ(?)はこちら
スクリプトといってもHTMLソース上に<script>タグを記述するのではなく
CSS内からスクリプトファイルを制御する構成になっています。
実際のCSS側の記述方法は
.box {
-moz-border-radius: 15px; /* Firefox */
-webkit-border-radius: 15px; /* Safari and Chrome */
border-radius: 15px; /* Opera 10.5+, future browsers, and now also Internet Explorer 6+ using IE-CSS3 */
-moz-box-shadow: 10px 10px 20px #000; /* Firefox */
-webkit-box-shadow: 10px 10px 20px #000; /* Safari and Chrome */
box-shadow: 10px 10px 20px #000; /* Opera 10.5+, future browsers and IE6+ using IE-CSS3 */
behavior: url(ie-css3.htc); /* This lets IE know to call the script on all elements which get the ‘box’ class */
}
となり、最後の行「behavior(ビヘイビア)」でIEに向けてのCSS3対応スクリプトファイルを読み込ませるのみ。
IE用の記述としては一行ですむことになります。
※「ie-css3.htc」ファイルは上記ページからダウンロードができます。
これを使ったからといってCSS3全てがIEで使えるようになる、というほどではなく、
—————————————-
角丸:border-radius
シャドウ(ボックス要素):box-shadow
シャドウ(テキスト):text-shadow
—————————————-
の3つのみ指定の効果を効かすことが可能になるもよう。
ですが、このスクリプトを対応させた要素(<div>など)は背景画像のno-repeatが効かない、
ウィンドウサイズをリサイズすることで要素のズレが生じる、など不具合もあるようですが、
ちょっとした角丸が必要な時などには使えそうな気もしています。
このスクリプトはCSSファイル上からスクリプトを実行可能とするIE独自機能のbehavior(ビヘイビア)「.htc」ファイルなので
サーバによっては拡張子が対応していない環境もあるかもしれませんのでご注意。
behavior(ビヘイビア)「.htc」ファイルについて詳しくはこちら。
≫[mA] 「behavior(.htc)」IE限定CSS機能 よさげなのピックアップ
ご参考までに。。。