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?

Answer 1

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

Answer 2

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.