Using Modernizr to Implement Missing HTML5 Features in Browsers

Friday, 08 January 2010

User sunny on github posted a quick gist snippet that shows how to use the aforelinked Modernizr to implement missing HTML5 features for browsers. Here’s an example of how you can pick and choose which HTML5 features you want to implement for the current page:

$(document).ready(function() {
  ProvideHtml5.autofocus();
  ProvideHtml5.datepicker();
  ProvideHtml5.forcenumber();
});

You’ll notice in the snippet that these methods are only being executed if the browser does not support a native HTML5 version. For example, here’s the definition for autofocus:

autofocus = function() {
    if (!Modernizr.autofocus)
      $('input[autofocus=""]').focus();
}

Since Modernizr only detects HTML5 functionality, this is a good example of how a script can be used to fill in the gaps caused by varying browser support.


Questions or Comments about this entry?
Send me a message on Twitter (@mirthlab) or via Email.