Thoughts, Findings, and Rants…

Building Your Very Own, Custom Version of Modernizr!

I fell in love with Modernizr the moment I set eyes on it. I was irreversibly enraptured when html5shiv was added to it.

One issue I have with Modernizr, though, is that is tests lots of features that I don’t currently need/use (is anyone out there using SVG on a commercial, production site?)… This got me thinking about being able to customize a Modernizr file to only check what I know I need it to check. I then Googled my idea, and found this:http://modernizr.github.com/Modernizr/2.0-beta/

Note: Although this is still BETA, it is using the most recent version of Modernizr (1.7 at time of writing).

Once you select which features you want your custom Modernizr to test, click the Generate It button to create your very own custom Modernizr build. This custom build even puts a comment at the very top of your file to remind you which features you selected; the following in my case:/* Modernizr custom build of 1.7: fontface | textshadow | rgba | borderradius | boxshadow | opacity | cssgradients | csstransforms3d | csstransitions | hashchange | audio | video | inputtypes | input | iepp */

Not only does this minimize the size of the file that your users have to download, but also reduces any time and resources that are required to test for features as your pages load.

The ideal approach, I think, would be to have a single instance of Modernizr for your site, adding to it any new features that you might need down the road. Yes, this increases the file size / resources site-wide, but it keeps your users from having to download multiple instances of Modernizr as they navigate from page-to-page across your site.