the best way to detect browser in js

Question

There are lots of ways for browser detecting in JavaScript.

As far as i know, using navigator.userAgent or detecting features (like XMLHttpRequest) and so on.

Can anybody tell me which way is the best and most effective?

Dayledaylight

For detecting features use modernizr.com – Forbearance

Answer 1

If you really need to know what browser they're using, you mostly have to look at the userAgent string (although you can sometimes infer the browser by looking for a couple of obscure features). Just be aware that some browsers let the user change that and lie to you. :-)

But detecting the browser is out of fashion, for good reasons. Instead, as you say, you want to detect the features you're looking for. This is more reliable, and less work. Just because IE didn't support addEventListener, for instance, doesn't mean it never will (and in fact IE9 does). So you feature-detect instead, which future-proofs the code.

Here's a concrete example: Suppose you want to know (as I did for my place5 jQuery plug-in) whether a browser supports the placeholder attribute. You could use browser detection and maintain a list of which browsers in which versions have or don't have support, which is messy and something you have to keep coming back to, etc., etc., or you could do this:

if ("placeholder" in document.createElement("input")) {
    // The browser supports the attribute
}
else {
    // It doesn't
}

...and you're done.

There's a great set of feature tests in this page maintained by kangax. There's also a library called Modernizr that does feature detection, media queries, and more for you. If you use jQuery, it has some feature detection built in via jQuery.support. There's a nice discussion of various aspects of feature detection, media queries, form-factor detection (tablet, phone, or PC?) in this article.

Overbold

JUST what I needed! detect IE9 and below. – Cockboat

@T.J. Crowder - Agreed with opting for feature detection instead, but what if you're trying to detect the browser to workaround a bug? A bug which you can't test for or it would hang the browser? – Roxyroy

@T.J. Crowder - aside from my previous question, I need to find browsers IE9 to IE7 and a good legit way to do that (based on your comments about feature detection) would be to use conditional comments (supported up until IE9) that set a variable. Right? – Roxyroy

@johntrepreneur: If that's the only way to do what you're trying to do, why not? But do check out kangax's page and such. There are things you really can't feature detect, but not nearly as many as I would have assumed... :-) – Overbold

There are cases where you have to detect the browser. For example, I'm working on a site that uses webGL, so we detect if that's available. If it's not I need to provide a browser specific message (specifically a set of instructiosn to enable webGL on Safari). – Warrantor

Answer 2

You do not detect browsers. Instead you check for available features.

Browsers detection can be worked around ( hell .. I had to do it myself when using opera on gmail few years ago ), but if browser has a feature, then you know that you can use it.

Maddux

There are cases where you have to know the specific browser so you can, for example, provide a browser specific message. – Warrantor

Well, in my case, instructions to enable webGL in Safari. – Warrantor

That is, detect webGL functionality, if it's not there, display a browser specific message (update your IE, here's how to enable webGL, etc.) – Warrantor

Answer 3

You can try this http://www.quirksmode.org/js/detect.html

But as others have noted, you should try to use feature detection, but sometimes it's just not enough. For example when some feature just works too badly/slowly etc.

Another great tool for feature detection is Modernizr

Bookseller

Answer 4

Feature detection is a short cut to detecting the browser. As already listed it is more important to know weather a feature is supported by your browser or not, rather than detecting the browser. The following link will help you differentiate between browsers depending on the Objects supported by them: http://www.javascriptkit.com/javatutors/objdetect3.shtml

However if you only want to detect the browser only for the sake on knowing, it is better to use Navigator rather than checking various features by checking for conditions.

Indign