Internet Explorer 8

Microsoftの次期メジャーブラウザとして登場することになるIE8では、標準規約への準拠作業が着々と進められている。特にCSS 2.1のテストスィートを寄贈するなど、CSS 2.1準拠の取り組みには余念がない。今回さらに同社のCSS 2.1への取り組みを強調する変更がIEBlogにおいてMicrosoft CSS Vendor Extensionsのタイトルのもと発表された。これによってIE7やIE8向けに作成したCSSに変更の必要性が生まれるためWebデザイナは同発表に注意しておきたい。

ブラウザでは標準規約として規程されたCSSプロパティ、標準規約で規程されているものの完全には準拠していないCSSプロパティ、現在標準化が進められているCSSプロパティ、ブラウザベンダが用意した独自拡張プロパティなどがある。こうしたプロパティのうちブラウザベンダが用意した独自拡張プロパティや標準規約で規程されているものの完全には準拠していないCSSプロパティ、現在策定が進められているプロパティは-ms-、-moz-、-o-といったベンダプレフィックスを指定しなければならない。これはCSS 2.1仕様で規程されている。

これまでのIE実装では該当するCSSプロパティであってもベンダプレフィックスは指定されていなかった。今回CSS 2.1への準拠率をより高めるため、次に該当するプロパティは-ms-プレフィックスが追加されることになった。

  • Microsoftによる拡張プロパティ(CSS仕様やモジュールに定義されていないもの)
  • W3C勧告になっていないCSS仕様やモジュールで規程されているプロパティ
  • CSS仕様で規程されているもののまだ実装がともなっていないプロパティ
Property Type W3C Status
-ms-accelerator Extension
-ms-background-position-x CSS3 Working Draft
-ms-background-position-y CSS3 Working Draft
-ms-behavior Extension
-ms-block-progression CSS3 Editor's Draft
-ms-filter Extension
-ms-ime-mode Extension
-ms-layout-grid CSS3 Editor's Draft
-ms-layout-grid-char CSS3 Editor's Draft
-ms-layout-grid-line CSS3 Editor's Draft
-ms-layout-grid-mode CSS3 Editor's Draft
-ms-layout-grid-type CSS3 Editor's Draft
-ms-line-break CSS3 Working Draft
-ms-line-grid-mode CSS3 Editor's Draft
-ms-interpolation-mode Extension
-ms-overflow-x CSS3 Working Draft
-ms-overflow-y CSS3 Working Draft
-ms-scrollbar-3dlight-color Extension
-ms-scrollbar-arrow-color Extension
-ms-scrollbar-base-color Extension
-ms-scrollbar-darkshadow-color Extension
-ms-scrollbar-face-color Extension
-ms-scrollbar-highlight-color Extension
-ms-scrollbar-shadow-color Extension
-ms-scrollbar-track-color Extension
-ms-text-align-last CSS3 Working Draft
-ms-text-autospace CSS3 Working Draft
-ms-text-justify CSS3 Working Draft
-ms-text-kashida-space CSS3 Working Draft
-ms-text-overflow CSS3 Working Draft
-ms-text-underline-position Extension
-ms-word-break CSS3 Working Draft
-ms-word-wrap CSS3 Working Draft
-ms-writing-mode CSS3 Editor's Draft
-ms-zoom Extension

このため、IE8で動作するCSSにするには、従来IE7向けに作成したプロパティのいくつかに-ms-を追加するといった編集が必要になる。IE8であっても互換ビューで動作させる場合にはIE7向けに記載したCSSがそのまま利用できるが、IEBlogではCSS 2.1に準拠したこの新しい記述に変更することを強く推奨している。ただし移行を容易にするため、-ms-がついていなくても-ms-が追加されたものとして解釈して動作するようになる可能性はある。細かい動きについては今後の開発や意見収集で決定されることになるとみられる。

#transparentDiv {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
  opacity: .5;
}
IE7でもIE8でも動作するようにする場合の例 - IE8用の設定を先に記載

IE7でもIE8でも動作するようにするには、双方の記述を含めればいい。また将来的には修正されると説明されているが、現在の実装にはバグがあり、IE8とIE7の双方で動作するようにするには必ずIE8用の設定を先に記載する必要があるとされている。

これまでCSS3のプロパティやIE独自拡張プロパティを使ってきた場合には変更が必要になりそうだ。IE向けのCSSに取り組んでいるWebデベロッパはMicrosoft CSS Vendor Extensionsの内容をよく検討しておきたい。