CSS: Simple Gradients in Internet Explorer <= 8

Go To StackoverFlow.com


As I'm sure you all know, Internet Explorer can handle simple gradients. Here is a snippet from Twitter Bootstrap, for example:

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);

However, I've seen some people use two CSS rules (one for IE < 8 and one for IE 8), like so:

filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#7fbf4d', endColorstr='#63a62f'); /* For Internet Explorer 5.5 - 7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#7fbf4d', endColorstr='#63a62f')"; /* For Internet Explorer 8 */

My question is, is the second rule really necessary? Twitter Bootstrap is quite thorough, yet it doesn't use any "-ms-filter" rules. According to this page, the -ms-filter attribute is an extension to CSS, and can be used as a synonym for filter in IE8 Standards mode.

2012-04-03 21:16
by Nick


My suggestion:

Use CSS3Pie -- http://css3pie.com/

This is a JavaScript library for IE6, IE7 and IE8 that patches in support for several CSS3 features, including gradients.

Yes, you can use the horrible IE-specific filter styles if you want, but CSS3Pie allows you to use standard CSS styles for these features. Much easier.

To actually answer your direct question:

Yes, the -ms-filter style is usually required. IE8 will always us it instead of filter, which is used primarily for IE6 and IE7. In some cases filter will work in IE8, but not all, so it's best to use -ms-filter to ensure IE8 compatibility.

[EDITED] Why did they change it? Because when they released IE8, Microsoft made a big point of trying to be "standards compliant".

For a browser to be standard-compliant, it should use a vendor prefix for any CSS property it supports that is not a finalized W3C standard. So by adding the -ms- prefix, Microsoft were trying to (belatedly) undo their pollution of the global CSS namespace.

In addition, the quotes were added, because the old filter syntax without the quotes was invalid CSS (mainly because of the colon after progid), and caused issues with some browsers. (I had an instance some time ago with Firefox 3.6 where it was dropping all styles following a filter style that rotated an element - took ages to work out what was happening).

The fact that Microsoft retained backward compatibility with the original filter syntax, was largely a matter of pragmatism. MS couldn't afford to break all the sites using the old syntax. But there was a strong implication from Microsoft that developers should use both because they would drop support for the old filter style in subsequent versions of IE. As it turned out, they dropped support for both filter and -ms-filer in one fell swoop, but the implications given at the release of IE8 were sufficient for it to become recommended practice to provide both syntaxes in your stylesheet.

At the time when IE8 was released, XHTML was the new flavor of the month, and writing code that validated perfectly was top of the list for a lot of developers. This was probably a strong driving force in the change of syntax to include the quotes. Because of the stray colons, it is impossible to write CSS that validates using the old filter style. Using the new -ms-filter styles instead allowed people to write valid CSS. As good ideas go, this one didn't really work out because of course people had to keep using the old syntax anyway, but the intent was good.

It's worth pointing out that other proprietary styles were given the same treatment. For example, you can use -ms-behavior in IE8 instead of the old behavior style. No-one uses it. Why? I don't really know.

Another fact worth knowing is that the W3C are in the process of standardizing a CSS property called filter. It will do a completely different job to the Microsoft filter style, and work completely differently. If/when it is standardized and browsers start supporting it, there will be an explicit clash between the two syntaxes.

2012-04-03 21:52
by Spudley
I don't really like CSS3Pie. See here and here. In the case of gradients, the filter version works in IE6, IE7, IE8, and IE9. In the consumer preview of IE10, it only works in compatibility mode. The -ms-filter version works in IE8 and IE9, but not IE10—even in compatibility mode. IE10 uses -ms-linear-gradient. It seems that the -ms-filter version is only good for IE8 and IE9, but those both support filter too, so why bother with the -ms-filter version at all - Nick 2012-04-03 23:28
I've updated the answer with a lot more detail about the whys and hows of -ms-filter - Spudley 2012-04-04 17:41
BTW - You're right, CSS3Pie can be slow. But so are filters. Neither of them are that slow, unless you seriously over-use them. And CSS3Pie has a big advantage of filters in that it supports alpha channel colours for your gradients, which MS's filter style doesn't. Your other option, of course, is simply to use a flat colour fall-back for old IE. Unless it totally ruins your site design, or your audience has a very high proportion of IE users, it's sometimes simpler just to let them have flat colours and square corners - Spudley 2012-04-04 17:45
Thanks! I think you hit the nail on the head with this: "the implications given at the release of IE8 were sufficient for it to become recommended practice to provide both syntaxes in your stylesheet." Since the -ms-filter version only works in IE8 and IE9, I don't see any reason to keep it. I'll just use the filter version. Thanks for helping me come to this conclusion - Nick 2012-04-04 20:02


Seems like you answered your own question. Yes they're needed. Microsoft trying to get more in line with the standards means that some versions of IE have their own slightly different syntax rules for the filter property.

In IE7 just filter: followed by the progid:DXIma... etc will work. But for IE8+ there is the IE7 fallback it may use in compatibility mode, and the more proper -ms- prefixed property for filter, denoting a vendor specific css property, and its value inside qoutes.

2012-04-03 21:41
by sg3s
The filter version works in IE6, IE7, IE8, and IE9, but not IE10. The -ms-filter version doesn't work in IE10 either. IE10 uses -ms-linear-gradient. Of course, IE10 isn't official yet, so that's subject to change. Anyway, if version 6-9 all support the filter version then why bother with the -ms-filter version at all - Nick 2012-04-03 23:01
I should add that the filter version works in IE10's compatibility mode, but the -ms-filter version never works in IE10—even in compatibility mode - Nick 2012-04-03 23:13
Microsoft has 2 conflicting policies at the moment. The first being that they want to be more standards compliant. This is what made them introduce -ms-filter because that is more or less considdered correct. Then the second policy is to support their own platform and features for long long times, this is the reason for compatibility mode and a whole range of properties that keep working because Microsoft figures that they can accurately predict what someone wanted to do even though it was targetted at an older version of IE. It's asking for confusion really : - sg3s 2012-04-04 05:34


What harm would it do to leave it in?

If the browser doesn't understand the line of CSS it will just ignore it.

Those two lines of CSS are almost identical. I would hazard a guess that Microsoft decided to change the syntax for proprietary CSS from IE8 onwards utilising the - (hyphen) prefix which other browsers have been using for yonks.

Technically the CSS isn't W3C compliant either way, so another line of proprietary CSS can do no harm.

It's not worth trying to understand IE at the best of times!

2012-04-03 21:45
by Chris Cannon
You already need so many repetitive lines for a single gradient, so why add yet another line when it's not needed? Plus, keeping the -ms-filter version when the filter version works just fine goes against the KISS principle and adds to the file size. I'm just curious if the developers who use both version have a logical reason for doing so - Nick 2012-04-03 23:15
Oh yeah, and as of consumer preview of IE10, the -ms-filter version is no longer supported, so it's apparently only good for IE8 and IE9 - Nick 2012-04-03 23:17