Gradient Support for IE 8 and Below

Question

I found a great CSS gradient code generator for the page my friend is doing, but there are some comments below that that bother 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 response:

I highly recommend against them! They do not work the same way, they are limited, they degrade performance and can cause layout problems. Simply put, since IE does not support gradients (and many other CSS features initially, without a filter), either use images for the same effect (background image), or convince their client that IE users get less experience (who cares about gradients against single colors, except for the crazy "designers"?), because their browser just doesn't match what we, as developers, want. He called graceful degradation, and IE should not be an exception.

So I don’t know: should I suggest that they / not use any of this code? Does IE make use of this code useless / hopeless?

Answer 1

Filter material is generally considered bad practice and invalidated by CSS (so your stylesheet will not check validation)

you can set the background image for the element in question, then IE will fall back to this image if it is a version that does not support gradients, the beauty is that browsers that support gradients do not load the background image (good, usually), so performance does not adversely affect .

Personally, if I were you, I would choose a solution for the background image, it is much cleaner than the whole "filtering" thing, and does not punish people who do not use Internet Explorer (yay!)

If you want more details, see here: http://css-tricks.com/css3-gradients/

Answer 2

I use http://www.colorzilla.com/gradient-editor/ to create CSS gradients. The code created 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 you can use gradients in MS IE.

Answer 3

Four years after the question was asked, the question did not disappear. I deal with a large number of sites for large corporations, and you still find IE8 on the corporate desktop, sometimes even in the standard of the company.

My recommendation would be to take these lines exactly as they are suggested. IE8 will use them, and any modern browser will ignore them. It pleases the designer that you implement his design to the best browser features, but you do not need to bother with striped background images.

Answer 4

 /* Internet Explorer 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;