How to detect the browser capabilities?

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

Answer 1

Here's a MSDN magazine article that talks about this subject: No Browser Left Behind: An HTML5 Adoption Strategy.

They mention to use a framework but you can apply techniques explained without it.

Answer 2

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
}