Question

From all the reading that I have done,
I have understood that using user-agent string is not recommended, as it can be spoofed. Devices can be hindered, etc.

I have also understood that the best option is to do a browser capability testing.

How do I do his? I mean, are there some standard capability test that I could do, something like this: object detection?

One more concern is that, won’t this include some overhead every time a user accesses the site? I know I can counter this using some cookies.

Please do not suggest to use a third party plugin/framework like jQuery.

Answer 1

Modernizr is a library that does feature detection. You can either use the library as is and then query it for the features you want or you can look at how it works for the particular features you want to detect and copy that into your own code.

How you do feature detection for a given feature depends entirely upon the particular feature.

The actual feature detection is generally quite fast (probably even faster than retrieving/storing anything in a cookie). Plus you are best off doing the feature detection every time in case the user upgrades to a newer version of their browser who’s capabilities change.

For example, if you want to know whether you can use the .forEach() method on the Array object, you can simply use this:

if ( Array.prototype.forEach ) {  
    // enter code here
}