Browser detection versus feature detection

Question

I am going to play a devil's advocate for a moment. I have been always wondering why browser detection (as opposed to feature detection) is considered to be a flat out as a bad practise. If I test a certain version of certain browser and confirm that, that certain functionality behaves is in some predictable way then it seems OK to decide to do special case it. The reasoning is that it will be in future foolproof, because this partial browser version is not going to change. On the other hand, if I detect that a DOM element has a function X, it does not necessarily mean that:

1. This function works the same way in all browsers, and
2. More crucially, it will work the same way even in all future browsers.

I just peeked into the jQuery source and they do feature detection by inserting a carefully constructed snippet of HTML into DOM and then they check it for certain features. It’s a sensible and solid way, but i would say that it would be a bit too heavy if i just did something like this in my little piece of personal JavaScript (without jQuery). They also have the advantage of practically infinite QA resources. On the other hand, what you often see people doing is that they check for the existence of function X, and then based on this, they assume the function will behave certain way in all browsers which have this function.

I’m not saying anything in the sense that feature detection is not a good thing (if used correctly), but I wonder why browser detection is usually immediately dismissed even if it sounds logical. I wonder whether it is another trendy thing to say.

Egbert

why do we even call it browser detection? almost every other browser including internet explorer just want to call themselves Mozilla? – Avaricious

Answer 1

It seems to me browser detection has been widely frowned upon since this post by Resig a couple of years ago. Resig's comments however were specific to libraries/framework code, i.e. code that will be consumed by other [domain-specific] applications/sites.

I think feature detection is without question a good fit for libraries/frameworks. For domain-specific applications however I'm not so sure browser detection is that bad. It's suitable for working around known browser characteristics that are difficult to feature-detect, or for browsers that have bugs in their implementation of the feature itself. Times that browser detection is appropriate:

• sites/applications that are not cross-browser and need to show a warning/dialog/DifferentPage tailoring to that client's browser. This is common in legacy applications.
• Banks or private sites with strict policies on what browsers and versions are supported (to avoid known security exploits that may compromise user's data)
• micro-optimizations: occasionally one browser is ridiculously faster than the others when performing some operation a certain way. It can be advantageous depending on your user base to branch on that particular browser/version.
• Lack of png transparency in IE6
• many display/rendering issues (read: IE css support) that are only witnessed in specific browser versions and you don't actually know what feature to test for.

That said, there are some major pitfalls (probably committed by most of us) to avoid when doing browser detection.

Bergeman

"It seems to me browser detection has been widely frowned upon since this post by Resig a couple of years ago". Browser detection was bad practice long before that article. I don't think any of your reasons for using browser detection stack–up. In what intranet application is lack of support for PNG transparency a show stopper? Writing cross browser sites is now simpler than ever, provided a pragmatic approach is adopted for newer features, e.g. would you really drop support for a browser because it doesn't support const or let? – Ranket

@RobG: I never said "browser detection" equals "deny access" nor "drop support". By browser detection I simply mean the presence of if (navigator.userAgent...) in the code. What takes place if a certain browser is detected varies. It could simply mean using a gif instead of a png. – Bergeman

Answer 2

Here's a good article explaining how feature detection is superior in so many ways to browser sniffing.

The truth is that sniffing is extremely fragile. It's fragile in theory, as it relies on an arbitrary userAgent string and then practically maps that string to a certain behavior. It's also fragile in practice, as time has shown. Testing every major and minor version of dozens of browsers and trying to parse build numbers of some of those versions is not practical at all; Testing certain behavior for quirks, on the other hand, is much more robust. Feature tests, for example, often catch bugs and inconsistencies that browser vendors incidentally copy from each other.

From my own experience, fixing Prototype.js in IE8, I know that 90% of the problems could have been avoided if we didn't sniff in the first place.

While fixing Prototype.js I discovered that some of the features that need to be tested are actually very common among JS libraries, so I made a little collection of common feature tests for anyone willing to get rid of sniffing.

Eydie

Answer 3

The ideal solution would be to have a combination of both feature and browser detection. The former falls down because of the points you mentioned and the latter because sometimes browsers publish false information to "make things work" just so.

Mozilla has a great Browser Detection Primer that might be helpful to you as well.

From wikipedia "At various points in its history, use of the Web has been dominated by one browser to the extent that many websites are designed to work only with that particular browser, rather than according to standards from bodies such as the W3C and IETF. Such sites often include "browser sniffing" code, which alters the information sent out depending on the User-Agent string received. This can mean that less popular browsers are not sent complex content, even though they might be able to deal with it correctly, or in extreme cases refused all content. Thus various browsers "cloak" or "spoof" this string, in order to identify themselves as something else to such detection code; often, the browser's real identity is then included later in the string."

Netsuke