Customizing the HTML5 checks Modernizr does

In the previous blog post I demonstrated how to use Modernizr to test for the availability of HTML 5 features. Doing so was quite easy but as every test is always performed to add CSS classes to the <html> element there is a bit of overhead in using the default Modernizr JavaScript file. Fortunately they have made a fix for this rather easy and added a page where you can quickly create a custom version with just the checks you need for your site.



Adding custom checks

The careful reader might have noticed that there is no option for Server-Sent Events I used in the previous blog post. And worse if you take the standard Modernizr JavaScript and use that the test I was using, either the JavaScript or the CSS styles

   1: if (Modernizr.eventsource) {

   2:     // Good to go

   3: }

   4: else {

   5:     // Oops

   6: }

doesn’t work and the JavaScript actually causes an error. The reason the code worked for me is another nice Modernizr capability of adding custom checks. In the Razor master page I added the following custom check using Modernizr.addTest().

   1: <script src="@Url.Content("~/Scripts/modernizr-2.0.6-development-only.js")" type="text/javascript"></script>

   2: <script>

   3:     Modernizr.addTest('eventsource', function () { return !!window.EventSource; });


Adding a test this way automatically adds both the test itself and the extra CSS classes to the <html> element.


Adding custom scripts

Another nice capability of Modernizr, actually implemented using yepNope.js, is the capability to conditionally load extra scripts. A great way to load HTML 5 polyfills for missing pieces in specific browsers.

An example, taken from the Modernizr, loading a geo location polyfill for those browser that don’t support geo location out of the box.

   1: Modernizr.load({

   2:   test: Modernizr.geolocation,

   3:   yep : 'geo.js',

   4:   nope: 'geo-polyfill.js'

   5: });


Modernizr is a must have in your HTML 5 arsenal.





Leave a Reply

Your email address will not be published. Required fields are marked *