Microsoft CSS Vendor Extensions

As you may know, all browsers have a set of CSS features that are either considered a vendor extension (e.g. -ms-interpolation-mode), are partial implementations of properties that are fully defined in the CSS specifications, or are implementation of properties that exist in the CSS specifications, but aren’t completely defined. According to the CSS 2.1 Specification, any of the properties that fall under the categories listed previously must have a vendor specific prefix, such as '-ms-' for Microsoft, '-moz-' for Mozilla, '-o-' for Opera, and so on.

As part of our plan to reach full CSS 2.1 compliance with Internet Explorer 8, we have decided to place all properties that fulfill one of the following conditions behind the '-ms-' prefix:

[*]If the property is a Microsoft extension (not defined in a CSS specification/module)[*]If the property is part of a CSS specification or module that hasn’t received Candidate Recommendation status from the W3C[*]If the property is a partial implementation of a property that is defined in a CSS specification or module

This change applies to the following properties, and therefore they should all be prefixed with '-ms-' when writing pages for Internet Explorer 8 (please note that if Internet Explorer 8 users are viewing your site in Compatibility View, they will see your page exactly as it would have been rendered in Internet Explorer 7, and in that case the prefix is neither needed nor acknowledged by the parser):

PropertyTypeW3C Status-ms-acceleratorExtension -ms-background-position-xCSS3Working Draft-ms-background-position-yCSS3Working Draft-ms-behaviorExtension -ms-block-progressionCSS3Editor's Draft-ms-filterExtension -ms-ime-modeExtension -ms-layout-gridCSS3Editor's Draft-ms-layout-grid-charCSS3Editor's Draft-ms-layout-grid-lineCSS3Editor's Draft-ms-layout-grid-modeCSS3Editor's Draft-ms-layout-grid-typeCSS3Editor's Draft-ms-line-breakCSS3Working Draft-ms-line-grid-modeCSS3Editor's Draft-ms-interpolation-modeExtension -ms-overflow-xCSS3Working Draft-ms-overflow-yCSS3Working Draft-ms-scrollbar-3dlight-colorExtension -ms-scrollbar-arrow-colorExtension -ms-scrollbar-base-colorExtension -ms-scrollbar-darkshadow-colorExtension -ms-scrollbar-face-colorExtension -ms-scrollbar-highlight-colorExtension -ms-scrollbar-shadow-colorExtension -ms-scrollbar-track-colorExtension -ms-text-align-lastCSS3Working Draft-ms-text-autospaceCSS3Working Draft-ms-text-justifyCSS3Working Draft-ms-text-kashida-spaceCSS3Working Draft-ms-text-overflowCSS3Working Draft-ms-text-underline-positionExtension -ms-word-breakCSS3Working Draft-ms-word-wrapCSS3Working Draft-ms-writing-modeCSS3Editor's Draft-ms-zoomExtension We understand the work involved in going back to pages you have already written and adding properties with the '-ms-' prefix, but we highly encourage you to do so in order for your page to be written in as compliant a manner as possible. However, in order to ease the transition, the non-prefixed versions of properties that existed in Internet Explorer 7, though considered deprecated, will continue to function in Internet Explorer 8.

Changes in the filter property syntax

Unfortunately, the original filter syntax was not CSS 2.1 compliant. For example, the equals sign, the colon, and the commas (highlighted in red) are illegal in the following context:

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

Since our CSS parser has been re-designed to comply with standards, the old filter syntax will be ignored as it should according to the CSS Specification. Therefore, it is now required that the defined filter is fully quoted. The proper way of writing out the filter defined above (with changes needed highlighted in green) would be:

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

In order to guarantee that users of both Internet Explorer 7 and 8 experience the filter, you can include both syntaxes listed above. Due to a peculiarity in our parser, you need to include the updated syntax first before the older syntax in order for the filter to work properly in Compatibility View (This is a known bug and will be fixed upon final release of IE8). Here is a CSS stylesheet example:

#transparentDiv {

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"

filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50)

opacity: .5

}

Thanks for your time and we are glad to hear your feedback!

Harel M. Williams

Program Manager

edit: modified header

More...