background-gradient, probably more than anything, brings the feeling of depth to a page. And to date, images were how this was done, across the board. Often very, very large images, because they had to repeat, repeatedly… I will continue my thread of “is it necessary?”, but probably really only for either very subtle, or very small, gradients. Otherwise, you’re really probably stuck with these.
So, if you do need background gradients, here are ways to do it.
The Options
-
Internet Explorer Filters
Pros:
- Pure, valid CSS, no JS, no HTC, no tricks, no hacks!
- IE8 offers vendor prefix (-ms).
- IE6/7 use non-proprietary
filter, so can easily put that into IE-only stylesheet. - For better or worse, IE6, 7, and 8 are pretty stable as they are, and so it is pretty easy to know which does, and doesn’t, do what.
- Easy to target specific browser versions if using HTML5 Boilerplate
<head>conditional comments.
Cons:
- Gradient filter goes from “A” to “B”, no stops allowed.
- Fairly limited set of
filters, and most look pretty crappy. filteris invalid, so stylesheets will not validate, if you care about that.- At least one more line of CSS for each feature…
-
CSS3 PIE
Pros:
- Able to use color-stops in gradients!
- Eliminates need for IE
filters. - Translates vendor-prefix gradients, including stops.
- Comes as a single package, which also adds border-radius and drop-shadows to IE (only).
- Is IE-only, so non-IE browsers get no additional weight, and if you add via an IE-only stylesheet, the rest of your stylesheets will validate (if that matters to you).
Cons:
- Comes as a single package, so if you don’t need those other features on a page, at 27.6kb, it’s a little heavy…
- Because it requires a non-standard
behaviorfor implementation, the stylesheet used to add this will not validate (if that matters to you). - Implementation requires JS; without JS, nothing happens.
- Not all servers permit HTC files.
The Bottom-Line
As long as you only need a 2-color gradient, I would say pure CSS (meaning IE filters) is always the way to go; if you need color-stops within your gradient, it’s going to have to be CSS3 PIE. Both will break validation, so the only real advantage CSS3 PIE has in this case is being able to not use IE filters, which is really not that big of a deal.
Leave a Reply