WEBサイト構築においてもはや常識となったCSS。新たな仕様のCSS3が整備されつつあり、表現の幅をさらに広げてくれるものになっていますが、最新のブラウザのみ対応しており、IE6のようなシェアがある旧世代のブラウザは対応していないというのが現状です。そこで今日紹介するのはIE6〜IE8をCSS3に対応させるスクリプト「Kick-ass CSS3 Support in IE6, 7, and 8」です。

全てのCSS3のプロパティが適応されるのではなく、角を丸くしたり、ボックスに影を入れたりテキストに影を入れたりといったCSS3の機能をスクリプトにｙほって再現するというものです。

詳しくは以下

スクリプトを読み込ませると言うCSSの指定で、実現します。適応したい要素内にCSS3で記述した後にIE用として、下記のように記述し外部スクリプトを読み込むという形で実装します。

.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 */
}

一行付け加えるだけなので、非常に便利で、手軽に実装できます。今まで画像などを駆使していた部分がかなり解決されるCSS3。IE6〜８で実現できるのであれば、実務として利用もできる範囲だと思います。IEでcss3を見送ろうとしている方は一度検討してみても良いかもしれません。

Kick-ass CSS3 Support in IE6, 7, and 8 | AEXT.NET MAGAZINE