Does Browser Sniffing Still Have a Place?
1 min read

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.

// Example of browser sniffing gone bad
var ieMatch = navigator.userAgent.match( /MSIE\s(\d)/ );
if ( ieMatch && parseInt( ieMatch[ 1 ], 10 ) >= 8 ) {
console.log( "IE 8+" );
} else {
console.log( "Feature Not Supported" );
view raw browser-sniffing.js hosted with ❤ by GitHub
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 browser object, 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.

// Prefered technique of determining feature support
if ( Modernizr.geolocation ) {
// Find the user's current location...
} else {
// Provide some sort of polyfill
view raw feature-detection.js hosted with ❤ by GitHub
You can find nice polyfills or shims for HTML5 features from the HTML5 Please website and the HTML5 Cross Browser Polyfills wiki from the Modernizr repository.

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

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.

Edit post on GitHub

Don't Hot-fix IE6-8, Upgrade to IE9-10 Instead
Adding jQuery Deferred Support to AmplifyJS Request