Here at ZURB we love CSS3 and how sexy new browsers render it, but what about older browsers that don't support awesome new features like box-shadow and border-radius? Sometimes it just means older browsers don't get sexy gradients and rounded edges, but other times it can result in a broken UI. There are number of ways to avoid this (conditional CSS comments, CSS hacks, user-agent sniffing, etc), but we've recently seen the light and started to use feature targeting.
What is Feature Targeting?
Feature targeting means writing your CSS based on the progressive capabilities of a browser, rather than basing your styles on which browser it is. Let's use box-shadow as an example...- The Problem: Let's assume I'm creating a white box on a white background and need to create a visual differentiation. I want to use CSS3 box-shadow to make it appear as though the box is "in-front-of" the background, but I know that it will just fail out in older browsers.
- The Old School Solution: First I would need to cook up a user-agent string sniffer in my preferred back-end language or in JS that gives me the ability to target CSS for specific browsers. Then, using my own knowledge of CSS3 support, I would have to target browsers that didn't support box-shadow and provide an alternate style (perhaps a border).
- Feature Targeting Solution: Attach a JS library that does feature targeting and simply give the white-box one style for browsers that support box-shadow and one for those that don't. Done.
Why is Feature Targeting Awesome?
Besides the clear advantage of cleaner, less cluttered code, feature targeting makes logical sense. If I am writing conditional CSS for two cases, one with box-shadow and one without, why would I target browsers? It doesn't make sense. I should target browser functionality. Feature targeting also leads to more sensible, legible, CSS. Instead of classes like "body.ie #whiteBox"', we write classes like ".no-box-shadow #whiteBox." We aren't providing a different style because we want it to look different for IE users, we're writing a different style to accommodate the lack of box-shadow. The end result for our users and visitors is an implentation that has all the bells and whistles in browsers that can support them, but a controlled degradation for less capable browsers.
Where Do I Start?
There are a number of JS libraries out there right now that do feature targeting, but the most focused, light and updated one we've found is Modernizr. We've been working with it for a while now, and it so good (girl). Just download the JS file, include it in your project and start writing your selectors based on feature support! Check out the Modernizr docs for more specifics, but we'll just say it doesn't get much easier. Modernizr even has the added bonus of adding support for new HTML5 elements like <section>,<head> and <nav> in IE.
Another library we use for feature support is head.js, but it has a lot of additional functionality that, if you are just looking for feature targeting, isn't needed (but still a great tool).
The Bottom Line
We are gung-ho about using CSS3 and feature targeting is an intelligent solution to making sure we can still show some love for older browsers. Does this mean we should abandon browser targeting? In a perfect world, the answer would be yes, but the real answer is no. Since there are still browser specific quirks and buggy implementations of specs by vendors, there are times where we need to still target specific browsers.
The rule of thumb: If you need multiple styles to address a lack of CSS3 support, use feature targeting. If you need to alternate styles because a specific browser version has a bug, use browser targeting.
Do you guys love feature targeting? Have you even heard of feature targeting? Let us know!