Using CSS gradient instead of images

Using CSS for creating gradients instead of images, does it have any negativity?

For example the following code:

 #gradient {
  color: #fff;
  height: 100px;
  padding: 10px;
  /* For WebKit (Safari, Google Chrome etc) */
  background: -webkit-gradient(linear, left top, left bottom, from(#00f), to(#fff));
  /* For Mozilla/Gecko (Firefox etc) */
  background: -moz-linear-gradient(top, #00f, #fff);
  /* For Internet Explorer 5.5 - 7 */开发者_StackOverflow
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF0000FF, endColorstr=#FFFFFFFF);
  /* For Internet Explorer 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF0000FF, endColorstr=#FFFFFFFF)";
 }

Thanks.

Gradients are not standardized yet and many browsers do not suport it, in your exemple -moz-linear-gradient works in firefox 3.6 but on older version doesn't. If your site is for public purposes, many people won't see you gradients, so you could check what version of browser they use, and use gradients or images based on that. I use gradients on an intranet site (where I can force users to use a specific browser), If the browser if not Firefox 3.6 or greater, the site will show just a message that tells the user to upgrade, but this is not a good way if you go public.

So i choose negative for public sites. :)

As you've illustrated in your example, there's no one way to do it that works in all commonly used browsers at the moment. I would consider that a "negative" for maintenance and code readability purposes.

A bit of constructive criticism: the word you're looking for is "instead", not "instant".

CSS gradients are used on many large websites using the fallbacks you are using. I would add PIE.htc as well. If you do use PIE remember that it needs to be absolutely or relatively positioned to show up.

If you have to support really old browsers the best way is to give them a fallback solid background-color.

To be it it silly to expect old browsers to display gradients at all. If you absolutely have to you can set up a conditionally loaded stylesheet:

<!--[if lt IE 8]>
    <link rel="stylesheet" type="text/css" href="http://mysite/css/ie7_hacks.css" /><![endif]-->

In there you can declare a repeating image-based gradient. Just like how it used to be done before CSS3.

By doing it this way you are making your site a little faster for modern web browsers.