From all the reading that I have done, I have understood that using user-agent string is not remended, 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.

From all the reading that I have done, I have understood that using user-agent string is not remended, 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.

• javascript
• browser
• css
• cross-browser

• 1 Sad you don't want third party because Modernizr does exactly what you want. – Stéphane Bebrone Commented Dec 14, 2011 at 7:35
• 1 My point is that, I learn how to do this. But thanks for the link ll look into it. – ThinkingMonkey Commented Dec 14, 2011 at 7:36
• 1 quirksmode/js/detect.html – noob Commented Dec 14, 2011 at 7:51
• thanks for the link.. Will go through it. – ThinkingMonkey Commented Dec 14, 2011 at 7:56

2 Answers 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
}

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.