Using Modernizr to Implement Missing HTML5 Features in Browsers

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.



Find This Article Useful?




Related Articles

About this entry

You’re currently reading “Using Modernizr to Implement Missing HTML5 Features in Browsers,” an entry on MirthLab

Published:
Friday, January 8th, 2010 at 10:02 am
Author:
Mark Quezada
Category:
Links, Web Development
Tags:
,