How to detect HTML 5 compatibility in browser

Question

What is the best way to detect browser compatibility for HTML 5 syntax? And prompt the user if the browser is not compatible?

I understand the tutorial which shows how to test browser compatibility for HTML5. But I am curious to know if that is the only way? Do I need to inspect each and every element?

Answer 1

Have a look at Modernizr:

Taking advantage of the new capabilities of HTML5 and CSS3 can mean sacrificing control over the experience in older browsers. Modernizr 2 is your starting point for making the best websites and applications that work exactly right no matter what browser or device your visitors use.

Thanks to the new Media Query tests and built-in YepNope.js micro-library as Modernizr.load(), you can now combine feature detection with media queries and conditional resource loading. That gives you the power and flexibility to optimize for every circumstance.

It has a lot of built in methods to test for browser features and provides a useful way of providing fallback code for when features you want to use are not supported.

More info: http://www.modernizr.com/