Speed Up with CSS3 Gradients Bogdan Michka | March 2, 2010 at 12:46 pm | Tags: css3, fallback, gradients, howto, web design | Categories: design, development, tips-n-tricks, web | URL: http://wp.me/pHbzX-fX

From the article:

Speed Up with CSS3 Gradients | CSS-Tricks

WebKit browsers paved the way with CSS based gradients. Now Firefox 3.6 is out and is supporting them as well, which makes using them for progressive enhancement all the more appealing. More good news, CSS3 gradients fall into the camp where you can specify fallbacks (i.e. images) so that browsers that don't support them just use the image instead.

But wait… if you need to use an image anyway, why bother with declaring the gradient with CSS? That is kind of how I felt for a long time, but there is one important aspect that makes it worth it: browsers that support them don't load the image fallback. One less HTTP Request = all the faster your site will load.

Huge thanks to Patrik Spathon for this idea and help with the demo page!

Add a comment to this post