Gradients in Internet Explorer 9

Question

Hi

Does anyone know the vendor prefix for gradients within IE9 or are we still supposed to still be using their proprietry filters?

What I've got for the other browsers is:

background-image: -moz-linear-gradient(top, #444444, #999999); /* FF3.6 */
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #444444),color-stop(1, #999999)); /* Saf4+, Chrome */
filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999'); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999')"; /* IE8 */

As a bonus does anyone know Opera's vendor prefix as well?

Cheers

Sniffer

Answer 1

Not sure about IE9, but Opera doesn’t seem to have any gradient support yet:

• http://www.opera.com/docs/specs/presto26/#css

No occurrence of “gradient” on that page.

There’s a great article by Robert Nyman on getting CSS gradients working in all browsers that aren’t Opera though:

• http://robertnyman.com/2010/02/15/css-gradients-for-all-web-browsers-without-using-images/

Not sure if that can be extended to use an image as a fallback.

Answer 2

You still need to use their proprietary filters as of IE9 beta 1.

Answer 3

I understand that IE9 still won't be supporting CSS gradients. Which is a shame, because it's supporting loads of other great new stuff.

You might want to look into CSS3Pie as a way of getting all versions of IE to support various CSS3 features (including gradients, but also border-radius and box-shadow) with the minimum of fuss.

I believe CSS3Pie works with IE9 (I've tried it on the pre-release versions, but not yet on the current beta).

Answer 4

Just FYI, Opera's vendor prefix is -o- :)