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:<scriptsrc="@Url.Content("~/Scripts/modernizr-2.0.6-development-only.js")"type="text/javascript"></script>1:2:<script>3: Modernizr.addTest('eventsource', function () { return !!window.EventSource; });</script>
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.
Enjoy!
www.TheProblemSolver.nl
www.dotnetevents.nl