IE 8 では独自実装や先行実装の CSS の書き方が変わるようです

2008年9月9日 火曜日

IEBlog : Microsoft CSS Vendor Extensions によると、IE 8 では、Microsoft の独自拡張のプロパティーや、CSS 3 などの (Candidate Recommendation に至っていない) 先行実装のプロパティーに対して、-ms- と接頭辞をつけるようになるみたいです。(Mozilla では -moz-, Opera では -o- や -wap- を接頭辞に使っています。)

なので、IE 8 では、独自実装や、先行実装のプロパティーを使う時には -ms-interpolation-mode のように -ms- をプロパティーの接頭辞として追加しなくてはなりません。

ただし、IE 8 でも Compatibility View (IE 7 モードみたいなの) を使っている時には今までのように接頭辞がなくても認識されるようです。

変更されるプロパティーは以下のとおりです。

例えば、IE 7 までは、

filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80, FinishOpacity=70, Style=2);

のような書き方をしていましたが、IE 8 では、

• プロパティの接頭辞に -ms- をつける
• :, =, , は使えないのでクォーテーションで囲んで文字列にする

という点に沿って

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80, FinishOpacity=70, Style=2)";

のようになります。

IE 7 までと IE 8 以降で、同じように動作させるためには、IE 7 以下用のコードと、IE 8 用のコードを一緒に書くことで実現が可能です。例えば、以下のように記述します。

#transparentDiv {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
opacity: .5;
}

IE チームが Web 標準にとても積極的なのが感じます。とてもいいことだと思うのですが、いままで filter などの一部の独自実装はたまに使うことがあったのですこし心配です。

以前、IE 8 の座談会が行われた時に、CSS 3 の先行実装は積極的には行わないといったことを Microsoft のかたから聞いた気がするのですが、接頭辞を用意するようですし、-ms-border-radius とか追加してほしいなぁと思っていますがどうなんでしょうか…。

11日に開催される CSS Nite in Shinjuku, Vol.2 で質問 + 要望してみようと思います。