Why and How Did We Use Browser Sniffing?
For a long time browser sniffing was the way developers tested for various browsers and as a result used a different API or feature set. You can always manually detect by using the
navigator.userAgent, but making sense of it can be difficult considering the vast amount of userAgent combinations. Some libraries were developed to assit the developer in making sense of the userAgent. A detect library can be found from QuirksMode and jQuery also provides the
browser object with some sniffing information.
Problems with Browser Sniffing
As you are probably aware, browser sniffing can be problematic and is the reason that some websites don’t work properly cross-browser or in new versions of browsers.
A simple example of where a browser sniff can break down is the following code snippet detecting for IE. The code should check if the browser is IE and if the version is 8 or greater.
The code snippet works just fine in versions of IE 1-9, but breaks for IE10 because the regular expression doesn’t account for multiple digits.
You can review many of the bad reasons why you shouldn’t browser sniff from the following resources
Note: I mentioned above that jQuery has a
browserobject, but that feature is deprecated and you shouldn’t use it anymore. Also the detect script I mentioned above also has a blurb about using object detection instead of browser sniffing.
Use Feature Detection Instead
Feature Detection is the preferred way to determine the functionality of a browser and to respond accordingly and we’ve seen that technique used in many libraries such as Modernizr and more.
An example of feature detection could look something like the following.
If you are interested in finding out more about Modernizr or on how to make your own feature detections I’d encourage you to check out the following resources
- Polyfilling the Gaps video & slides by +Lea Verou
- Writing Your Own Cross Browser Polyfills by +Addy Osmani
Does Browser Sniffing Still Have a Place?
I recently became curious as to when browser sniffing might ever be acceptable. I mean, surely there must be a valid use case even if it isn’t pretty. So, I went on a search on Twitter and I also polled some of my close developer friends on their thoughts. The following is a list of my findings.
Valid Use Cases for Browser Sniffing
I’ve found the following use cases justifiable reasons to use browser sniffing.
- Target specific content to platform a such as Mac or Win download. An example may be a Download link for multi-platform systems.
- Gather analytic information for marketing purposes. An example may be getting desktop, tablet, and mobile statistics from users.
- Determining if a user is on a particular platform in order to pin their application to the user’s home or start screen. An example may be an iOS and showing a tooltip to add the mobile app to the home screen.
- In some cases Feature Detection isn’t sufficient or there is no way to determine a certain state or behavior. In that case browser sniffing may need to be used. An example of this is in the history.js detection in the Modernizr library.
Do you have any other use cases that you’ve seen or used that you feel are valid reasons to use browser sniffing? I’d be interested in hearing them.