Right alongside background-gradient, box-shadow (CSS-speak for drop-shadows) gives a page depth. And, like background-gradients, images were usually how this was done. Either very, very large images, or unnecessary divs and annoying sprites… “Are they necessary?” Probably.
So, if you do need drop-shadows, 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) and IE6/7 use the 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:
- 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:
- Eliminates need for IE
filters. - 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.
- Eliminates need for IE
The Bottom-Line
I would say pure CSS (meaning IE filters) is always the way to go, but both IE Filters and CSS3 PIE will break validation, so, your call.
Leave a Reply