IE8のCSS3およびベンダ拡張は"-ms-"に変更、Webデザイナは注意必要

 

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の内容をよく検討しておきたい。



転職ノウハウ

あなたが本領発揮できる仕事を診断
あなたの仕事適性診断

シゴト性格・弱点が20の質問でサクッと分かる!

「仕事辞めたい……」その理由は?
「仕事辞めたい……」その理由は?

71%の人が仕事を辞めたいと思った経験あり。その理由と対処法は?

3年後の年収どうなる? 年収予報
3年後の年収どうなる? 年収予報

今の年収は適正? 3年後は? あなたの年収をデータに基づき予報します。

激務な職場を辞めたいが、美女が邪魔して辞められない
激務な職場を辞めたいが、美女が邪魔して辞められない

美人上司と可愛い過ぎる後輩に挟まれるエンジニアの悩み

人気記事

一覧

イチオシ記事

新着記事

「春佳・彩花のSSちゃんねる」、DJCD発売と番組単独イベント開催が決定
[02:00 8/31] ホビー
[銀の匙]サンデーで半年ぶりに連載 次号も掲載へ
[00:00 8/31] ホビー
「天智と天武」最終10&11巻が同時リリース、兄弟の愛憎劇描く歴史マンガ
[23:10 8/30] ホビー
ダークホラーで納涼…!「もののべ古書店怪奇譚」などフェアで描き下ろし特典
[23:00 8/30] ホビー
藤子・F・不二雄の世界へトリップするファンブック、渋谷直角や星野源も
[22:53 8/30] ホビー

求人情報