Internet Explorer 9 製品候補版が来た。CSS3はどうよ?

PC版へ 2011年02月12日
ダウンロードはコチラから → Internet Explorer 9 製品候補版 - Microsoft Windows

ぺろっと使ってみましたが、以前たまたま気がついたCSSの不具合が解消されています。素晴らしい。CSSに関しては、他のブラウザで先行実装が始まっていた CSS3 のプロパティにも対応しています。ま、完全ではないですが、大きな進歩。

他のブラウザとの互換問題はだいぶ解消されましたが、今度は IE8 との互換問題が…。前にboxshadowプロパティのことを書きましたが、IE9は、CSS3のプロパティとともに、IE伝統の独自ブロパティ "filter" も理解するので、いろいろと面倒なことになりそうです。

Internet Explorer 8時代は、IEがCSS3のプロパティを理解しないので、IE8と他のブラウザとの間で同じような効果を得るために、例えばこんなスタイルシートの記述をしましたね。

さまざまなブラウザでボックスシャドウの効果を得たい場合
div.shadow{
  -moz-box-shadow:5px 5px 5px #999;  /* Firefox用 */
  -webkit-box-shadow:5px 5px 5px #999;  /* Safari, Chrome用 */
  box-shadow:5px 5px 5px #999;  /* Opera用 */
  filter: progid:DXImageTransform.Microsoft.Shadow(color='#999999', Direction=145, Strength=7);  /* IE 8用 */
 }

さてIE 9、box-shadowプロパティを理解するので、上記のスタイルシートのままで良い感じに表示されます。…と思いきや、同時に filterプロパティも理解するのですなぁ。この場合は filterプロパティの設定が優先されて表示されます。

現実問題、IE 9がリリースされたとしても、当分のあいだIE 8の存在を切り捨てるなんてことは有り得ないので、上記のようなスタイルシートを書かざるを得ません。結局IE 9がbox-shadowプロパティに対応した意味、あんまり無し、と。

で、CSS3で加わったプロパティでtransformというのもありますね。IE 8までは以下のように書けば、各ブラウザで同様の効果が得られます。ちなみに下のスタイルは「時計回りに90度回転+鏡像反転」の例。

さまざまなブラウザで transform の効果を得たい場合
div.trans{
 -moz-transform: matrix(0, 1, 1, 0, 0, 0);  /* Firefox */
 -webkit-transform: matrix(0, 1, 1, 0, 0, 0);  /* Safari, Chrome */
 -o-transform: matrix(0, 1, 1, 0, 0, 0);  /* Opera */
 filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=1, mirror=1); /* IE 8 */
}

IE 9は -ms-transform というプロパティを持ったので「よしよし、上のスタイルシートに -ms-transform: matrix(0, 1, 1, 0, 0, 0); を書き足してやろう」と思ったらダメ。何故ならIE9は -ms-transform と filter の両方を理解してレイアウトしようとしやがります。結果、ぶっ壊れた表示に。

…結局、-ms-transform は使わずに、今までどおりのスタイルシートを使い続けるのがベター…ということになってしまいます。

うーん。

JavaScriptにしても、IE9はDOM標準とかにも良く対応しているっぽいのですが、結局、IE8のシェアが無視できるレベルに下がるまでは、今までどおり面倒くさいクロスブラウザ対応のコードを書き続けなくてはならないのですな、よく考えると。

そんな日は来るのだろうか。

参考Webページ
  → CSS Compatibility and Internet Explorer|MSDN 英語

関連記事

コメント

現在、コメント機能は停止しています。