先日のエントリー「現在公開されているブラウザのCSS3対応状況」でIEのCSS3に対するやる気の無さが垣間見えましたが、
そんなIEに対してCSS3のプロパティを有効にするスクリプト「ie-css3.htc」というものがあったのでご紹介。

ie-css3-htc.jpg
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機能 よさげなのピックアップ

ご参考までに。。。

  • このエントリーをはてなブックマークに追加
BlackFlag
FOLLOW

Related Posts

Comments (0)







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。
コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して

IE6,7,8でCSS3を対応可能にするスクリプト「ie-css3.htc」

Hatena Bookmark
Popular Entries
Recent Entries
PR
Facebook
Tweets
Books
  • jQuery Technical Note
  • 外掛OUT! jQuery 高手精技
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR