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.

Modernizr

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.

  • Raul Riera

    Who is using HTML 5 for public websites?

  • http://www.webresourcesdepot.com Umut M.

    @Raul,

    This website has a good collection of them:
    http://html5gallery.com/

  • http://www.utopiestudio.co.uk/ Utopie Web Design Liverpool

    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

  • Richard

    @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 :(

Search