IE9 βのCSS3対応は微妙かもしれない。box-shadow。

さてさてInternet Explorer 9、機能の目玉はなんといっても「CSS3対応」だと思うのですが、どんな具合なのかベータ版で試してみる。

個人的によく使うプロパティに box-shadow があります。オブジェクトに影を付けて立体的に見せるやつ。イメージ画像は↓こちら。
boxshadow.jpgで、Firefox / Safari / Google Chrome / Opera の各ブラウザで box-shadow の効果を実現するためには、例えば以下のようなスタイルシートの記述になります。

div.shadow{
 -moz-box-shadow:5px 5px 5px #999;  /* FF3.5+ */
 -webkit-box-shadow:5px 5px 5px #999;  /* S3+ , GC */
 box-shadow:5px 5px 5px #999; /* O10.5+ */
}

IE8 以前のバージョンは box-shadow を解さないので、代わりにIE独自の filter プロパティを使って同じような効果を表現してみたりします。

div.shadow{
 -moz-box-shadow:5px 5px 5px #999;  /* FF3.5+ */
 -webkit-box-shadow:5px 5px 5px #999;  /* S3+ , GC */
 box-shadow:5px 5px 5px #999; /* O10.5+ */
 filter: progid:DXImageTransform.Microsoft.Shadow(color='#999999', Direction=145, Strength=7); /* IE 8 */
}

実際にサンプルページをいろいろなブラウザで見くらべてみてください。

でIE 9 は、box-shadow をめでたく理解するようになりました。つまり、上で例示したスタイルシート内の、Opera用として記述した box-shadow:5px 5px 5px #999; というのをIE 9は正しく解釈してくれるわけです。

試しに、

div.shadow{
 box-shadow:5px 5px 5px #999;
}

…とだけ記述したスタイルを適用してみたサンプルページ。IE 9β と Opera10.5以降で見たときだけ box-shadow の効果が得られると思います。

が、ここで割と重大な問題が。

IE9 ベータ版は、IEの独自プロパティ "filter" も理解する。

たとえば、上のスタイルをGoogle Chromeが読んだときには…

div.shadow{
 -moz-box-shadow:5px 5px 5px #999;  ←Chromeは理解できないので読み飛ばす
 -webkit-box-shadow:5px 5px 5px #999;  ←理解できるのでスタイル適用
 box-shadow:5px 5px 5px #999;  ←理解できないので読み飛ばす
 filter: progid:DXImageTransform.Microsoft.Shadow(color='#999999', Direction=145, Strength=7);  ←理解できないので読み飛ばす
}

…という処理になるのですが、IE 9βで読み込むと…

div.shadow{
 -moz-box-shadow:5px 5px 5px #999;  ←IE 9βは理解できないので読み飛ばす
 -webkit-box-shadow:5px 5px 5px #999;  ←理解できないので読み飛ばす
 box-shadow:5px 5px 5px #999;  ←理解できるのでスタイル適用
 filter: progid:DXImageTransform.Microsoft.Shadow(color='#999999', Direction=145, Strength=7);  ←理解できるのでスタイル適用
}

…となって、結局 filter のほうが優先で適用されます。記述の順番を変えてもやっぱり filter が優先。

クロスブラウザで見栄えに差が出ないようにと、上記のようなスタイルシート設定をしている人も多いと思います。IE 8とそれ以前のバージョンで効くように filter プロパティを設定すると、せっかくCSS3のbox-shadowに対応したIE 9βでも、box-shadowを無視して filter が効いてしまう…。

まぁ「表示が大幅にズレる」とか、そういう致命的な話ではないので良いっちゃ良いのですが。

CSS3に対応した意味、ないじゃん。
 

カテゴリ: