Microsoft CSS ベンダー拡張
更新日: 2008 年 9 月 8 日
本記事は、Internet Explorer 開発チーム ブログ (英語) の翻訳記事です。本記事に含まれる情報は、Internet Explorer 開発チームブログ (英語) が作成された時点の内容であり、製品の仕様や動作内容を保証するものではありません。本記事に含まれる情報の利用については、使用条件をご参照ください。また、本記事掲載時点で、Internet Explorer 開発チーム ブログ (英語) の内容が変更されている場合があります。最新情報については、Internet Explorer 開発チームブログ (英語) をご参照ください。
翻訳元 : Microsoft CSS Vendor Extensions (英語)
ご存知かと思いますが、全てのブラウザーは、完全に規定済みのCSS 仕様を部分的に実装したプロパティや、CSS 仕様は存在するものの定義が完了していないプロパティの実装といった、ベンダー拡張とみなされるCSS の機能セット (例 -ms-interpolation-mode) を持っています。CSS 2.1 仕様によれば、このカテゴリに分類されるプロパティは、例えばMicrosoft であれば -ms-、Mozilla は -moz-、Opera は -o- といったベンダー固有のプレフィックスをつける必要があります。
Internet Explorer 8 を CSS 2.1 完全準拠とする計画の一部として、次の条件をひとつでも満たすプロパティの前には-ms- プレフィックスを配置することを決定しました。
- プロパティが Microsoft の独自拡張である場合 (CSS 仕様、もしくはモジュールで定義されていない)
- プロパティが W3C から勧告候補 (Candidate Recommendation) のステータスを付与されていないCSS 仕様、もしくはモジュールの一部である
- プロパティが CSS 仕様、もしくはモジュールで定義されているプロパティの部分的な実装である。
この変更は次のプロパティに対して適用されるため、Internet Explorer 8 用のページを記述する場合、これらすべてのプロパティの前に-ms- をつける必要があります。(Internet Explorer 8 の互換表示モードでページを見る場合、Internet Explorer 7 で描画したとの正確に同様に表示され、この場合プレフィックスは必要なく、パーサーにも認識されないことに注意してください)。
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 |
|
この変更が、既に記述したページを見直し、プロパティに -ms- プレフィックスを追加することになると理解しておりますが、可能な限り様式に準拠して記述したページにするために、この変更を強く推奨します。ただし移行を容易にするため、Internet Explorer 7 で存在していたプレフィックスのないバージョンのプロパティについては、推奨はいたしませんが Internet Explorer 8 でも機能し続けます。
フィルタープロパティ構文の変更
残念なことに、オリジナルのフィルター構文はCSS 2.1 に準拠しませんでした。例えば、次のコンテキスト内の等号、コロン、カンマ (赤くハイライトしています) は認められていません。
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity =80, FinishOpacity=70, Style=2);
CSS パーサーは標準に準拠するために再設計されたため、以前のフィルター構文はCSS 仕様に適合させるために無視されます。これによって、現在はフィルターの定義はすべてコーテーションで囲む必要があります。正しいフィルター定義を書く方法は次の通りです (変更が必要な部分は 緑でハイライトしています)。
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80, FinishOpacity=70, Style=2)";
Internet Explorer 7 と 8 のユーザーの双方でフィルターが機能することを保証するため、上記の両方の構文を加える必要があります。パーサーの問題のため、互換モードで 正常にフィルターを動作させるために、新しいフィルター構文を古い構文の前に記述する必要があります (これは既知のバグであり、Internet Explorer 8 の最終リリースでは修正される予定です)。以下はCSS スタイルシートの例です。
#transparentDiv {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
opacity: .5;
}
お時間を割いていただきありがとうございます。
皆様のフィードバックを伺うことができてうれしく思います。
Harel M. Williams
Program Manager
ページのトップへ