Home/ Questions/Q 8518945
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-11T06:06:57+00:00

I found a great CSS gradient code generator for a page my friend is

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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/

    • 0