Customizing the HTML5 checks Modernizr does

Wednesday 09 November 2011

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.