Modernizr: Why We Do The Config We Do

In The Rails View (page 23 for those of you following along at home) we cover how to roll your own version of the Modernizr library, but we don’t really dive into which items you want to use in that library. The list of potential items keeps growing and can be somewhat overwhelming at times. We can’t possibly cover every piece of this framework, so if there’s something you’re curious about, we suggest that you deep dive on the Modernizr documentation.

How does Modernizr do the things it does? Well, in the documentation it’s explained as:

For a lot of the tests, Modernizr does its “magic” by creating an element, setting a specific style instruction on that element and then immediately retrieving it. Browsers that understand the instruction will return something sensible; browsers that don’t understand it will return nothing or “undefined”.

Let’s look at the options on the custom build page and see what we may need.

The Core

The core pieces that we absolutely need are actually listed under the “Extra” heading on the right side of the grey area. The html5shiv is a tool that allows “the use of HTML5 sectioning elements in legacy Internet Explorer, as well as default HTML5 styling in Internet Exporer 6-9, Safari 4.x (and iPhone 3.x), and Firefox 3.x.” The end point of the shiv is that it allows us to use HTML5 elements in almost any production site by telling the DOM that they exist and letting us print and style those HTML5 elements. If you need printing, you need to select the “w/printshiv” option.

The other part of the Modenizr core is YepNopeJS, which is a simple javascript that detects for a condition (if something can be handled by the browser) and applys one class if yes and another if no. It can be used in its native form to serve certain files based on that condition. This loader is optional and around 3k in size. It gives you access to the Modenrizr.load() function, so if you want that, you need to have this checked.

We also use Media Queries in many of our sites, so we want to turn that on as well. That covers the “Extra” section (which I would call the “core” section) and from there, it’s not too complex. This is effectively Respond.js, so if you want to use that outside of Modernizr, you can do so.

The last is “Add CSS classes” and it will add CSS classes to your HTML tag for the page. If you want to do support detection for CSS3 features, you need to check this.

CSS & HTML

The CSS3 section contains detection and support for various CSS3 elements. If you plan to use them, you should include them. For the book, you really only need @font-face, CSSGradients, box-shadow, and rgba(). The rest are fun to play with, and as your view skills grow you will find yourself using many of these.

The HTML5 area is actually not the HTML5 tags, as those were activated with the HTML5Shiv discussed in “The Core” above. This area includes those elements that are more part of the extended family of technologies that make up “HTML5”. The only things we discuss in the book are the Input Attribtutes and Input Types (both discussed in the Forms chapter).

Remember that each item you add increases the size of this file and is another test that is running on each page load.

Misc. & Add-ons

At this point, if you’re diving into these items, you’re probably pretty familiar with polyfills, modernizr, and the like. This gives you access to some of the more complex (or just fun) items available in some browsers. If you’re interested in switching to box-sizing: border-box then you probably want to check that polyfill off.

For almost anything that can be detected, someone has created a polyfill for it. Remember, if you don’t need to support older browsers, then many of these things are simply noise.

Finally for further reading, The 2010 article by Faruk Ateş entitled “Taking Advantage of HTML5 and CSS3 with Modernizr” at A List Apart is an excellent resource on pragmatically approaching the use of this tool.

Good luck!