ぺろっと使ってみましたが、以前たまたま気がついた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 英語
コメント