Question

Here’s a question for all you experts out there.

When IE5.5 launched, it came with a range of new filters, such as:

filter:progid:DXImageTransform.Microsoft.Gradient(sProperties).

Later versions of IE supports a shorter method for enabling alpha-transparency:

filter: alpha(opacity = 50);

Does anyone have a good explanation, as to why IE doesn’t support a shorter method for gradient, e.g. filter: gradient(startcolor, endcolor)?

Answer 1

The whole filter style is proprietary to Microsoft and IE, and has never been subject to any kind of external standardisation process.

Therefore the choice of syntax and what is supported or not is entirely down to the whims of Microsoft.

One thing worth knowing about the filter:progid:.... syntax is that it is invalid CSS, due to the colon after progid. I have seen cases where this syntax has actually caused serious parsing errors in other browsers. (in one case, Firefox 3.6 refused to parse any further down the stylesheet after encountering a rotation filter)

This sort of issue may possibly have been part of the motivation for providing shorter alternative syntaxes, since those are at least syntactically valid CSS, although it doesn’t explain why they would have done it for some filters and not for all of them.

Other than that, there’s no good reason that I know of why they would have chosen to provide short-cut variants of some of the filter style and not others. Perhaps they decided to only do it for the ones which were in popular use? But whatever the reasons for the decisions that were made, these short styles only apply for IE6 and IE7, and they’re in the distant past and are really only of historic interest now.

With IE8, they replaced filter with -ms-filter, and went back to the longhand versions of the styles, and added a requirement to wrap the value in quotes (thus resolving the invalid CSS issue I described above).

With IE9, the whole question becomes moot, because they’ve dropped the filter style entirely, and implemented the standard CSS3 alternatives.

If you’re trying to work the filter styles, especially gradients, I would strongly recommend looking into tools such as CSS3Pie, which is a Javascript wrapper designed to allow IE6-8 to support CSS3 standard styles for gradients, etc. this allows you to write your CSS code without having to use the non-standard IE-only filters. Other similar tools exist for other filter styles.