Detect the user browser with javascript

Question

I am using the following code to discover the user browser:

navigator.appName == "Microsoft Internet Explorer"

It always worked, but IE11 is returning Netscape

I have read that Browser detection is a bad practice. (Why does JavaScript navigator.appName return Netscape for Safari, Firefox and Chrome?), and we should detect feature. But the site of MS is teaching me how to detect the IE browser.

In the IE11, even the userAgent metions IE:

Mozilla/5.0 (Windows NT 6.3; WOW64; Trident/7.0; .NET4.0E; .NET4.0C; InfoPath.3; .NET CLR 3.5.30729; .NET CLR 2.0.50727; .NET CLR 3.0.30729; rv:11.0) like Gecko

This being said:

What is the right way to know what I have to use?

For example, if I am using IE, the command is:

window.document.execCommand('Stop');

else, the command is

window.stop()

Taking a ride, what is the correct way to know if the browser supports HTML5?

You really ought to read about using feature detection rather than browser detection. Browser detection is brittle and can break each time a new browser is released. Feature detection don't right is both forward and backward compatible. — jfriend00
– jfriend00, Commented Aug 19, 2014 at 3:41

adeneo · Accepted Answer · 2014-08-19 06:48:48Z

5

The correct way would be to just check for the feature, as you've mentioned, and never do browser sniffing at all.

function stop() {
    if ('execCommand' in document) {
       document.execCommand('Stop');
    }else{
       window.stop()
    }
}

To do it the other way around, you could just polyfill window.stop with execCommand, like this

if (! ( typeof window.stop == 'function' && 
        window.stop.toString().indexOf('native code') != -1
      )
) {
    window.stop = function () {
        document.execCommand('Stop');
    }
}

That would also make sure it's the native method, and is tested in Chrome, Firefox and Opera

edited Aug 19, 2014 at 6:48

answered Aug 19, 2014 at 3:41

adeneo

319k29 gold badges410 silver badges392 bronze badges

Sign up to request clarification or add additional context in comments.

16 Comments

jfriend00 Over a year ago

Don't you want your detection the other way around as in if ('stop' in window) so you favor using window.stop() if it exists?

adeneo Over a year ago

@jfriend00 - I was worried that someone would do <div id="stop"></div>, and suddenly window.stop is not what you think it is

Nizam Over a year ago

Thanks a lot. I understood that I need to look for the feature but I was not knowing how to do it.

jfriend00 Over a year ago

@Nizam - you can check if something is a function with if (typeof window.stop === "function").

jfriend00 Over a year ago

I get your point about the global conflict with stop. What I was concerned about is that execCommand is supported, but not the "stop" verb. When I read the MDN page, I see lots of execCommand verbs, but no "stop" which could give your logic problems.

|

MattSizzle · Accepted Answer · 2014-08-19 03:47:31Z

Well wouldn't it be cool if there was a JavaScript library that detects HTML5 and CSS3 features in the user’s browser so that you could know if a certain feature is supported instead of relying on browser detection (version nightmares ahead)...

There is... modernizr

From the Docs:

Why use Modernizr? Taking advantage of cool new web technologies is great fun, until you have to support browsers that lag behind. Modernizr makes it easy for you to write conditional JavaScript and CSS to handle each situation, whether a browser supports a feature or not. It’s perfect for doing progressive enhancement easily.

How it works Modernizr runs quickly on page load to detect features; it then creates a JavaScript object with the results, and adds classes to the html element for you to key your CSS on. Modernizr supports dozens of tests, and optionally includes YepNope.js for conditional loading of external .js and .css resources.

An Example (also from the docs)

Modernizr.load({
  test: Modernizr.geolocation,
  yep : 'geo.js',
  nope: 'geo-polyfill.js'
});

In this example, we decided that we should load a different script depending on whether geolocation is supported in the host browser or not. By doing this, you save users from having to download code that their browser does not need. This increases page performance, and offers a clear place to build a healthy amount of abstraction to your polyfills (both 'geo.js' and 'geo-polyfill.js' would seem the same to the rest of the app, even if they're implemented differently).

IMO modernizr is the de facto feature detection JavaScript Library and I use it on ALL my projects. It does have a slight learning curve, but the docs are great, and cover pretty much every feature, and the flexibility it provides you within the above example alone is enough of a reason to use it.

Collectives™ on Stack Overflow

Detect the user browser with javascript

2 Answers 2

16 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

16 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related