Gradient support for IE 8 and below

Question

I found a great CSS gradient code generator for a page my friend is making, but there are some comments below it that worry me:

/* For Internet Explorer 5.5 - 7 */
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#cccccc, endColorstr=#ffffff);
        /* For Internet Explorer 8 */
        -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#cccccc, endColorstr=#ffffff)";    
        background-color: #CCC;

And in reply:

I strongly recommend against these! They do not act the same, are limited, hurt performance, and can cause layout issues. Simply put, since IE does not support gradients (and many other CSS features natively, without filter), either use images for the same effect (background image) or convince your client that IE users get less of an experience (who seriously cares about gradients vs single colours besides insane 'designers'?) because their browser just doesn't match up to what we as developers want. It's called graceful degradation and IE should not be any exception to that.

So what I don't know is: Should I suggest they do/do not use any of this code? Is getting IE to use this code useless/hopeless?

Answer 1

The filter stuff is generally regarded as bad practice, and isn't valid CSS (so your stylesheet will fail validation tests)

it's possible to set a background image for the element in question, then IE will fallback to that image if it's a version that doesn't support gradients, the beauty of it is that browsers supporting gradients don't load the background image (well, usually) so performance isn't impacted negatively.

Personally, if I were you I'd go for the background image solution, it's a lot cleaner than the whole "filter" thing, and doesn't punish people not using Internet Explorer (yay!)

If you'd like more detail, see here: http://css-tricks.com/css3-gradients/

Answer 2

I'm using http://www.colorzilla.com/gradient-editor/ to create CSS gradients. THe code produced there works even in IE 6+:

background: #1e5799; /* Old browsers */
background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* IE10+ */
background: linear-gradient(to bottom, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */

So yes, you could use gradients in MS IE.

Answer 3

Four years after the question was asked, the issue has not gone away. I do a lot of sites for large corporates and you still find IE8 on the corporate desktop, sometimes even as the company standard.

My recommendation would be to take those lines exactly as they are offered. IE8 will use them, and any modern browser will ignore them. It keeps the designer happy that you are implementing his design to the best of the browser's ability, but you don't have to mess about with striped background images.