This is an important announcement from the IE8 team that will impact how you write CSS. Although, technically, I understand the reasoning they give behind the choice they've made, the end result is not so good for people whose career involves CSS/Web layout in cross-browser environments. Basically, the IE8 team have decided that in their attempt to reach full CSS 2.1 compliance, they would corral all non CSS 2.1 CSS properties into a Microsoft-specific extension. This affects a number of CSS properties that have been in use in all browsers for quite some time. Below is a table of some long-existing properties and their new versions with the Microsoft prefix. As you can see, some are Microsoft's proprietary extensions, whereas others are what are termed "Working Draft" status:
| 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 | |
As you can see in the above table, stalwarts such as background-position, filter, overflow, text-align, text-justify, text-overflow, word-wrap and zoom all now require the -ms- prefix. For filters it gets even more complicated. For example, whereas in the past you might have written something like this:
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
You now have to quote the filter's value:
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
Whereas in the past the following CSS would create a cross-browser transparent div:
#transparentDiv {
zoom: 1;
filter: alpha(opacity=50);
opacity: .5;
}
You now have to write it as below for it to work with all versions of IE and other browsers:
#transparentDiv {
-ms-zoom: 1;
zoom: 1;
-ms-filter: "alpha(opacity=50)"
filter: alpha(opacity=50);
opacity: .5;
}
What the use of the -ms- vender prefix does offer is code validation, like those annoying red squiggly underlines in Visual Studio for CSS that it can't understand. Validators ignore CSS with vendor prefixes. But is validation worth the extra work that this thrusts upon the development community?