IEでCSS3を使ってみた（記録）

mixiチェック

Chrome、Firefox、Safari、Operaなど、昨今のモダンブラウザーがCSS3に対応しつつある中、依然としてCSS3対応への遅れを見せているInternetExplorerですが、最新版のIE9も2011年4月にリリースされ、少しずつですがCSS3が現実味を帯びてきました。

そこで、CSS3に対応していないIE8以前でもCSS3を適用させるために、管理人がいろいろ試したことを少し紹介してみます。

IE9.jsを使う

公式サイトはこちらから行くことができます。

元々は、HTML5などに対応させるために使い始めましたが、今ではHTML5の新規要素やブラウザー間の差異に対応するために使用しています。

その他にも、CSS3の擬似セレクターなどに対応させるためにSelectivizrを、Canvasに対応させるためにExplorerCanvasを使用しています。

コンディショナルコメントを使って、IE8以下のみに適用させるようにしています。

<!--[if lt IE 9]>
<script type="text/javascript" src="ie9.js"></script>
<script type="text/javascript" src="selectivizr.js"></script>
<script type="text/javascript" src="excanvas.js"></script>
<![endif]-->

↑こんな感じですね。

PIE（Progressive Internet Explorer）を使う

CSS3PIE、これは有名ですね。
ただ、PIEはIE6-8に対応していて、IE9の線形グラデーション（linear-gradient）やborder-imageなどには対応していません、まぁ当たり前ですね。

そのため管理人は、フォーラムで挙がっていたテストビルド（0.5beta候補）を使用して無理やりIE9にも対応させています。
このテストビルドでは、線形グラデーションにIE9で新しく対応したSVGを内部で使っているそうです。

background: -webkit-gradient( linear, left top, left bottom, color-stop( 0, #f00 ), color-stop( 0.5, #090 ), color-stop( 1, #00f ) );
background: -webkit-linear-gradient( top,  #f00 0%, #090 50%, #00f 100% );
background: -moz-linear-gradient( top, #f00 0%, #090 50%, #00f 100% );
background: -o-linear-gradient( top, #f00 0%, #090 50%, #00f  100% );
-pie-background: linear-gradient( top, #f00 0%, #090 50%, #00f 100% );
background: -ms-linear-gradient( top, #f00 0%, #090 50%, #00f  100% );
background: linear-gradient( top, #f00 0%, #090 50%, #00f 100% );
behavior: url( /PIE.htc );
position: relative;

-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-webkit-background-clip: padding-box;
behavior: url( /PIE.htc );

-moz-box-shadow: 5px 5px 10px 0 #666;
-webkit-box-shadow: 5px 5px 10px 0 #666;
box-shadow: 5px 5px 10px 0 #666;
behavior: url( /PIE.htc );
position: relative;

カテゴリー:CSS3関連
2011/08/15 15:39:09 更新