[JS]IE6/7/8でもCSS3が使えるようになるスクリプト -IE-CSS3
Post on:2010年4月13日
sponsors
IE6/7/8のブラウザでも角丸やボックスシャドウなどCSS3のプロパティのいくつかが使えるようになるbehaviorスクリプトを紹介します。
上記キャプチャはIE7のもので、角丸やボックスシャドウのスタイルが適用されたものとなっています。
実装サンプル
デモのキャプチャ
上記デモのスタイルシートは下記のようになります。
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<textarea name="code" class="css" cols="60" rows="5"> .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 */ } </textarea> |
通常のスタイルシートと異なるのは最後の一行で、「behavior: url(ie-css3.htc);」を記述します。
サポートしているプロパティ
サポートするCSS3のプロパティは下記の通りです。
- border-radius
角丸 - box-shadow
ボックスのシャドウ - text-shadow
テキストのシャドウ
sponsors
