Hopefully by now you're starting to get the idea of how feature detection differs from the traditional way of browser (User Agent) sniffing, and how you can use that to your benefit.
Modernizr doesn't ever ask the question, is this Internet Explorer 8, or is this Firefox 13? Instead it asks the question, is there support for a particular feature? Is there CSS gradient support? Is there multiple background image support?
Features can be predicted in parts because although not a finalized specification, HTML5 has been adopted as a new standard by all the major browser manufacturers. That's right, all manufacturers, even Internet Explorer. You can bet that feature detection is a world more reliable than UA sniffing as well.
So what exactly is wrong with browser sniffing, the process of checking the browser manufacturer and version with which the user is visiting your site with the help of JavaScript? After all, it's gotten us all this far, right?
Consider the amount of browsers in the market today and contrast that with the browsers available five years ago. The market has grown; for example, a particular browser named Google Chrome came from virtually nowhere and quickly grabbed a huge chunk of the market share. Not only has the number of manufacturers for browsers grown, but the devices that they support and are deployed on have grown as well. Where there was once just the Opera browser for instance, Opera at the time of this publication now makes a version of their browser for Windows, Mac, Linux, Mobile, and Tablet browsers.
That sure is a whole lot of browser sniffing to do! Plus that's only one manufacturer. We still haven't gotten around to Mozilla Firefox, Google Chrome, Apple Safari, or Microsoft Internet Explorer. We haven't even come near newer devices coming out every year, for example, Amazon Kindle Fire. Do you really want to have to detect and route for potentially every one of these devices and add in new code each time another one comes to market? I sure don't!
An example of User Agent (browser) sniffing the old way using JavaScript is shown in the following code snippet:
<script> /*** Logging User Agent to the javascript console.*/console.log( navigator.userAgent ); </script>
Doing this from Google Chrome 19 will return the following:
"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_4) AppleWebKit/536.5 (KHTML, like Gecko) Chrome/19.0.1084.56 Safari/536.5"
Yikes! So is this Mozilla, Chrome, or Safari? This return code hasn't even told us if we can use an HTML5 or CSS3 feature. We would need to further consult another resource such as caniuse.com to check what is and isn't available to us based on the type of browser we discovered. The amount of if-else statements could really get out of hand quickly.
Conversely let us look again at Modernizr running a feature test:
<script>
if(Modernizr.geolocation){//That's it! Look how simple and easy that was.}</script>User Agent sniffing has and will always be nothing but an unreliable headache with very little pay off. It won't be getting simpler or easier, only more elaborate. In fact, the very popular and arguably most widely used JavaScript library in the world, jQuery even warns against using UA sniffing and favors feature detection for its own internal usage. In fact, don't be too surprised if jQuery eventually removes UA sniffing methods from its core library altogether in the future. I can almost guarantee you that the moment it isn't needed anymore, it will go the way of the Dodo.
If you are still very much tied to this method for building your web pages, now is the time to wean yourself away from browser sniffing and over to feature detection. We are in a very good place right now because, at long last, no single browser owns nearly the entire market share.
As of April 2012, no single browser had more than 25 percent of the market share, as seen in the following screenshot:
Image courtesy of Wikipedia (http://commons.wikimedia.org/wiki/File:Browser_Usage_on_Wikipedia_February_2012.svg)
Whereas before we were tied to constantly worrying and stressing over support for a particular browser—because although very antiquated it may have accounted for 85 percent of your users (I don't really need to name names here)—no longer is that the case.
In actuality, it makes things much easier for the vendors themselves to not have to deal with UA detection, as they can now focus less on reporting (and occasionally spoofing their information) and more on the supporting and even inventing of new features. It's a win for everyone!