[JS]IE6/7/8でもCSS3が使えるようになるスクリプト -IE-CSS3

サイト構築 -JavaScript

IE6/7/8のブラウザでも角丸やボックスシャドウなどCSS3のプロパティのいくつかが使えるようになるbehaviorスクリプトを紹介します。

IE-CSS3

上記キャプチャはIE7のもので、角丸やボックスシャドウのスタイルが適用されたものとなっています。

実装サンプル

デモのキャプチャ

上記デモのスタイルシートは下記のようになります。

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: url(ie-css3.htc);」を記述します。

サポートしているプロパティ

サポートするCSS3のプロパティは下記の通りです。

border-radius
角丸
box-shadow
ボックスのシャドウ
text-shadow
テキストのシャドウ

Post on:2010年4月13日

top of page

Trackback

leave your Comments

Comments

10時のヘッドライン | CROSS SBM

on 2010年4月13日

[...] Bing、ショッピング検索をアップデート商品レビュー強化など::SEM RBuzzurl:3 [JS]IE6/7/8でもCSS3が使えるようになるスクリプト -IE-CSS3 | コリスはてブ:19 [...]

13時のヘッドライン | CROSS SBM

on 2010年4月13日

[...] [JS]IE6/7/8でもCSS3が使えるようになるスクリプト -IE-CSS3 | コリスlivedoor:7 “どうもしっくりこない”をCSSで解決! – MdN Design [...]

hide

on 2010年4月13日

これは便利ですね。
今HTML5とCSS３だけでサイト作っているのですが、ちょっと参考にさせてもらいます。
以前のエントリーでもいくつかありましたが、1行だけ、っていうのがミソですね。

16時のヘッドライン | CROSS SBM

on 2010年4月13日

[...] MobaLogはてブ:6 [JS]IE6/7/8でもCSS3が使えるようになるスクリプト -IE-CSS3 | コリスfc2:1 漢(オトコ)のコンピュータ道: [...]

freewebdev.jp

on 2010年4月13日

IE6/7/8でもCSS3が使えるようになるスクリプト

「CSS3 support for Internet Explorer 6, 7, and 8」
IE6/7/8のブラウザでも角丸やボックスシャドウなどCSS3のプロパティのいくつかが使えるようになるbehaviorスクリプトを紹介します。

サポートするCSS3…

Bookmark 2010/4/13 « Web / 仕事 / 生活などのメモ｜Desired Blog

on 2010年4月13日

[...] [JS]IE6/7/8でもCSS3が使えるようになるスクリプト -IE-CSS3 | コリス [...]

[JS]IE6/7/8でもCSS3が使えるようになるスクリプト -IE-CSS3 | コリス | 俺的ニュースメモ

on 2010年4月13日

[...] [JS]IE6/7/8でもCSS3が使えるようになるスクリプト -IE-CSS3 | コリス [...]

links for 2010-04-13 « 個人的な雑記

on 2010年4月14日

[...] [JS]IE6/7/8でもCSS3が使えるようになるスクリプト -IE-CSS3 | コリス (tags: ie css3 css) [...]

0bits.org

on 2010年4月15日

[JS]IE6/7/8でもCSS3が使えるようになるスクリプト -IE-CSS3 | コリス

[JS]IE6/7/8でもCSS3が使えるようになるスクリプト -IE-CSS3 これはすごい。対応はborder-radius、text-shadow、box-shadowだそうですが、それでもぱっと見分かりやすいCSS３の効果は押さえているのでは…

[JS]IE6/7/8でもCSS3が使えるようになるスクリプト -IE-CSS3 | コリス - 0bits.org

on 2010年4月15日

[...] [JS]IE6/7/8でもCSS3が使えるようになるスクリプト -IE-CSS3 [...]

tmtqn543

on 2010年4月22日

はじめまして、早速試してみましたところ、box-shadowの色を変更してもIEでは＃000にしかならないようなのですが、そのような仕様なのでしょうか、影の色を黒以外に変更することはできますか？

コリス

on 2010年4月22日

> tmtqn543 さん

現在のところカラーの指定は、「What doesn’t work」の「Any color other than #000」にあるように、#000以外の指定は機能しない仕様になっているようです。

ie-css3.htcを使ってみた。 | yuxu's notebook

on 2010年4月23日

[...] 仕事がらみで角丸のあるデザインをコーディングするにあたり、最近コリスさんのところで紹介されていたie-css3.htcを試してみました。 [...]

IEでもCSS3 | ダリの雑記：WEBプログラム版

on 2010年7月21日

[...] まずは「ie-css3」を利用する方法。（参考サイト：コリスさんのサイト） [...]

匿名

on 2010年9月13日

divを入れ子にして使うと表示されません。
正確には、親divに背景画像を指定して、子divに背景画像指定しbehavior: url(ie-css3.htc);を記述すると、一番下のレイヤーに表示されてる見たいです。
z-indexでレイヤーを上げてみると表示されるのですが、さらにie-css3.htcを指定したdivの中のdiv（孫div）が隠れてしまいます。
孫divにもz-indexを指定してさらに上の階層にしても結果替わらず・・・

まだまだ実用に向かないのでしょうか？

解決策ってありますか？

| WEBのお勉強とその他趣味的な感じで

on 2011年3月4日

[...] 】/ie-css3.htc); と一行追加するだけ。詳しくは、コリスさんのページで。 [...]

CSS3を使ってレイアウト変更 | WEBのお勉強とその他趣味的な感じで

on 2011年3月4日

[...] 】/ie-css3.htc); と一行追加するだけ。詳しくは、コリスさんのページで。 [...]

top of page