Using CSS gradient instead of images

Question

Using CSS to create gradients instead of images, does it have any negative?

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 */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF0000FF, endColorstr=#FFFFFFFF); /* For Internet Explorer 8 */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF0000FF, endColorstr=#FFFFFFFF)"; } 

Thanks.

Answer 1

Gradients are not standardized yet, and many browsers do not support it, in your example -moz-linear-gradient works in firefox 3.6, but this is not the case in an older version. If your site is intended for public purposes, many people will not see you in gradients, so you can check which version of the browser they use and use gradients or images based on this. I use gradients on the intranet site (where I can get users to use a specific browser). If the browser, if not Firefox 3.6 or higher, the site will only display a message that informs the user about the update, but this is not good if you become public.

So, I choose the negative for public sites. :)

Answer 2

As you showed in your example, there is no way to do this, which works in all commonly used browsers at the moment. I would think that this is a "negative" for the purpose of serving and reading code.

A bit of constructive criticism: the word you are looking for is “instead of,” not “instant.”

Answer 3

CSS gradients are used on many large websites using the backups you use. I would add PIE.htc. If you are using PIE, remember that it must be absolutely or relatively positioned for display.

If you need to support really old browsers, the best way is to give them a solid solid background color.

It would be foolish to expect older browsers to display gradients in general. If you absolutely need to set up a conditionally loaded stylesheet:

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

There you can declare a repeating gradient based on images. Just as it did before CSS3.

By doing this this way, you make your site a little faster for modern web browsers.