how to detect HTML5 and CSS3 support in IE browser?

Question

currently I am working on project where I have to detect does clients browser supports HTML5 or not, I am using following script to detect HTML5 support it works fine in all browsers except IE.

   function getHTML5VideoSupport() {
    if (!IsAttributeSupported("video", "src")) {
        return false;
    }

    else {
        return true;
    }
}

this method returns true if browser supports HTML5 else false. but problem is in IE, and I also have to check for CSS3 support.

Answer 1

Neither HTML5 nor CSS3 is an all or nothing proposition. You can't say a browser 100% supports it or doesn't support it as both are a whole grab bag of individual capabilities.

The safe way to check for support is to identify the particular features that you need and use feature detection to see if they are supported or not.

For example, IE9 supports pieces of CSS3, but not CSS transitions. HTML5 consists of many different pieces which are again supported differently by different browsers and different versions of the same browser. There's one set of tests for HTML5 audio, yet another for local storage, canvas, hash change events, web sockets, etc...

The feature detection library modernizr contains a wide array of feature detection capabilities that can let you test for exactly the capabilities your app needs using well-tested code. You can either include the whole library or copy just the pieces you need into your own app.

So, to test for CSS3, you'd have to identify exactly which capabilities you need in CSS3 and identify feature tests for those particular capabilities.

See this article for more info about feature detection for individual HTML5 features.