Speed Up with CSS3 Gradients
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!
How it’s done
Cutting to the chase, here is how it’s done:
div {
background-color: #1a82f7; /* fallback color */
background-image: url(images/linear_bg_2.png); /* fallback image */
background-image: -moz-linear-gradient(100% 100% 90deg, #2F2727, #1a82f7);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1a82f7), to(#2F2727));
}Different syntax for different rendering engines
Mozilla (Firefox, Flock, etc)
Mozilla’s syntax (more detail here) is like this:
-moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )The simplest way to declare a gradient is to just list a comma separated list of colors. That will start at the top and gradient to the bottom with equidistant color stops for each color. In the demo code above, we use a point and an angle (90deg) to it go bottom-to-top instead. For radial gradients: -moz-radial-gradient
WebKit (Safari, Chrome, etc)
WebKit’s syntax (more detail here) is like this:
-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*)Trident (IE)
Trident’s syntax (not really CSS3… more detail here) is like this:
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB)";Unfortunately, we can’t invite IE to the party! Using these filter properties does indeed work, and it would allow us to programatically declare gradients which is cool. But, instead of using the filter first and the image as a fallback, declaring a background-image overrides the filter and it uses that. Since we definitely still need image fallbacks, we might as well not use this at all.
“Stops”
The WebKit and Mozilla syntax for gradients both incorporate “stops”. A stop is an optional additional declaration that includes a point and a color. This means the gradient wont just start at one color and end at the other, it will fade to the stop color first, and that stop color will fade to the end color. More than one stop can also be used.
Saving HTTP requests
Using Firebug and looking in the Net tab to see all the resources used by the page, we can see the advantage.
The above screenshot is Firefox 3.6. We can see that the gradient fallback images are NOT loaded, which saves an HTTP request.
However using Firefox 3.5.8, the fallbacks are loaded.
We don’t save any HTTP Requests in olders version of Firefox (This is 3.5.8 on Vista). The gradient fallback images are still being loaded (and used).
It gets a little more iffy in WebKit browsers.
WebKit browsers WILL use the CSS3 property to render the gradient, but at the same time, still load the fallback images, so no HTTP requests are saved. The only advantage is the programatic declaration of color.
Doing it by the numbers
The speed gained by losing an HTTP request, to me, is the biggest advantage. The more I learn about web performance it seems to me keeping those down is the #1 way to improve page load time. However there is another advantage to using CSS3 gradients, and that is that these gradients are created programatically through numbers. Need to adjust some colors? Just adjust some numbers. No need to bring a big image editing program into the picture. This makes maintaining the site easier, as well as opens up doors for adjusting values on-the-fly. I imagine JavaScript libraries will begin to get the ability to animate these values soon enough, which will be pretty darn cool.
Ooooh Stretchy
When using an image for a gradient, it is declared as a CSS background-image and then repeated (you can often get away with a 1px slice, which is very efficient, size wise). The result though is that a static portion of the background is gradientized, and any overflow to that is flat color. Sometimes that works perfectly. Sometimes though it would be cool if the gradient stretched the entire height or width of the box. That is another thing CSS3 gradients can possibly be useful for:
So the big question is…
Is it really worth doing right now? I’m thinking it’s pretty darn close. If the numeric representation is a big deal to you, then I say yes you should start using them. If the speed is the only reason you would, then just realize that the only browser that it will help in is Firefox 3.6+, so you might wanna wait a bit on that.
