css3 gradients

With the release of FireFox 3.6 it is now possible to do css gradients across the most commonly used browsers. This is cause for celebration no doubt, but looking at all the different implementations and workarounds this requires, we're still a long way from where we need to be. Add to that some unexpected troubles and there's enough substance for a short article.

I won't be going into too much detail on how to implement all gradient variants in the different browsers families, there are plenty of tutorials out there doing a pretty good enough job at that already. Instead this article will take a closer look at how these css3 gradients make our life easier and what additional problems they present.

the tower of babel

There is no final css3 spec for css gradients, which blows. Firefox and Safari are currently holding on to their own vendor prefixes and syntax, which are wildly different from each other. A similar thing is happening with the css3 border-radius property, though the differences in the css3 gradient syntax are way bigger. My preference goes to the Firefox syntax as it ties in closer with the existing css syntax. The Webkit syntax feels more like reading an awkwardly constructed English sentence. On the other hand, the actual rendering of the gradient is much better in Webkit. A lot cleaner and homogeneous, whereas Firefox still shows clear color levels in certain gradients.

There is another problem in Firefox where a gradient defined on the body is repeated if the site isn't as big as the browser window. I haven't really checked for default behavior of the body tag in this particular situation, but Webkit simply continues the gradient over the complete browser area, which is a lot nicer. It can be fixed adding a min-height of 100% on both html and body tag, but clean it ain't.

Then there is Opera 10.5 which currently doesn't support css gradients, so no gradients for Opera users. This is probably not a bad thing as Opera isn't into vendor-specific prefixes. Introducing it now with a syntax that is nowhere near completion will result into bigger problems later on. And then there is IE of course. Usually the last one to get any of the spiffy features, though it turns out gradients have been possible in IE from IE5.5 onward, through the use of DX filters. Not the quickest or cleanest way to do anything design related, but as a last resort not such a bad option.

The conclusion is clear though. Three vendors, three syntaxes, not one of them according to any official spec.

specs and graceful degradation

What does this mean for the future? Imagine a final spec in a year or two. We then have to add the actual css3 proposed property, hope that Opera has the same syntax as the final spec, leave the vendor-specific properties alone until all versions that depend on the vendor-specific properties have died out and add the DX filters for IE. All that for one simple css gradient.

Sure it saves us one server request, sure it's a lot cleaner to do it in css, but I'm not really looking forward to this way of working. Certainly if you count all the other semi-supported css3 properties currently in use. The same will happen for border-radius and box-shadow. I'm not really pointing fingers (though I do believe Webkit and Firefox are being a little childish) but all these semi-supported css3 properties are not making our job easier and will become problematic in a couple years time.

So much for the graceful part of degradation.

mind IE

Also mind that even though IE support gradients, you still won't be able to use it in all circumstances. If you're reading this blog in the latest versions of Firefox, Safari or Chrome you'll see the gradients in the background of my site. If you're reading it in IE they won't be there. The reason is simple but wasn't immediately clear when I first read about the IE support for gradients.

The problem lies with the rounded corners of my main frame. Since the height of my blog isn't fixed I cannot predict where the bottom rounding will hit the gradient. As the rounded corners are done using images in IE I have to cut the background color inside the image,yet I don't know where they'll hit the gradient so I have no idea what background to cut into the corner images.

For IE I had to choose between gradients and the absence of rounded corners, or rounded corners and no gradients. I chose the latter as the impact on the rest of the site is a lot bigger. So know that css gradients can be used in IE, but they still don't act nice if rounded elements need to be positioned on top of the gradient.

conclusion

The conclusion is quite obvious. css3 gradients are cool if you can apply them to simple elements or if you have a client who can live with the fact that some browsers won't show the gradient. Sadly all the different implementation will muddle your stylesheet (the syntax isn't exactly short either) and will continue to pollute it long after the official spec has launched.

If you want quality gradients across all browsers, it's still better to work with a css background image. You'll have complete control over the rendering and it will work seamlessly across all browsers. But if you need to save server requests and you don't mind lesser implementations and muddy css code, at least you finally have a valid option.