Better HTML5 & CSS3 Usage By Detecting Browsers Capabilities With Modernizr

Similar to the IE6 situation, when using HTML5/CSS3 in our websites, it is a good idea to offer non-problematic outputs to web users with older/non-standard browsers.

Modernizr is a JavaScript library that uses feature detection techniques to determine whether or not the current browser is capable of CSS3 and HTML5 features like rgba(), border-radius, CSS Transitions & more.


It enables you to write pseudo-IF/ELSE statements in your CSS &, if wanted, it is possible to wirite conditional statements in JavaScript with the help of a "Modernizr JavaScript object" created.

Also, Modernizr adds support for styling HTML 5 elements. This allows you to use more semantic, forward-looking elements such as <section>, <header> and <dialog> without having to worry about them not working in Internet Explorer.

  1. Reply Raul Riera July 2, 2009 at 1:54 AM

    Who is using HTML 5 for public websites?

  2. Reply Umut M. July 2, 2009 at 2:55 AM


    This website has a good collection of them:

  3. Reply Utopie Web Design Liverpool July 3, 2009 at 10:43 AM

    Sounds like a pain in the arse to do. Just display a message to the user that their browser is out dated and to consider upgrading to FF or IE8

  4. Reply Richard March 3, 2011 at 9:32 PM

    @Utopie Web Design Liverpool
    I know your comment was a long time ago but this page comes up top in a Google search so need to put you right here. IE8 does not do html5 or css3, for a web design co. you really should know this!
    Two rules:
    1. check out progressive enhancement on wikipedia
    2. never, ever, recommend IE as a web browser, any version.

    Still looking for a simple way to test for html5 compliance though 🙁

Leave a reply