Gradients in Internet Explorer

Last week at the digital barn I gave a talk called “The Way the web should be” in it I talked about the importance of Web Standards in the development of IE. In a follow up blog post Ian Parr made an interesting point:>

One point that I think MS people sometimes miss is that it’s one thing having comparable features in browsers, but it’s another thing all-together ensuring that these features can be implemented consistently. I think a great example of this is implementing a linear gradient with opacity using CSS3. It’s great that you can now do this in CSS but if you look at the difference between doing this in Firefox and Webkit (with a nice tidy rgba value) and IE9 (with a confusing 8-digit hex code… thing) then it shows there is still one way for IE and one way for everyone else.

I understand Ian’s frustration on this one, and just wanted to share my own views on this.

It’s worth saying straight out of the gate, our implementation of linear gradients in IE10 is experimental and does not necessarily reflect what will appear in the final version of the browser. This is indicated by the vendor prefix –ms that is applied to the attribute. We put the vendor prefix for one of 2 reasons, we recognise that our implementation is not complete or we think the specification is likely to change.

Secondly as far as I am aware you can happily use RGBA values for transparency of linear gradients as this quick demo shows (works, in IE10 and latest versions of FF,Chrome, Opera and Safari). There has been some discussion around the specifics of over on the W3C mailing list but as far as we are aware platform preview 4 currently supports linear gradients in the same way WebKit, Opera and Mozilla does.

I completely  agree with Ian with Ian's sentiment, however, and have said many times before “a bad implementation is worse than no implementation” Implementing stuff which wasn’t ready or properly thought out was the exact thing we did wrong with IE6…. And we are still paying for it 11 years later.

If you want to play around with CSS3 Gradients the IE team have put together this rather nice CSS3 gradient maker.

Published by thebeebs

Martin works for Oracle as a Developer Evangelist. He’s been a developer since the late 90s and loves figuring out problems and experimenting with code.