By Craig Buckler

What’s New in Modernizr 2

By Craig Buckler

The second version of Modernizr has been released. Modernizr is probably the best-known and most widely-used feature detection library. As well as 40 browser tests and updated documentation, there are several new features to excite HTML5, CSS3 and JavaScript developers…

Conditional Resource Loading

yepnope.js is now integrated within Modernizr. It allows the page to conditionally load JavaScript or CSS files depending on support for one or more browser features. For example:

	test: Modernizr.geolocation,
	yep : "geo.js",
	nope: "geo-polyfill.js"

In this situation, a browser which supports HTML5 geo-location will load geo.js whereas one without support will load geo-polyfill.js — which possibly contains extra code to implement similar functionality.

For more information, refer to Regressive Enhancement with Modernizr and Yepnope.

Media Query Testing

Responsive web design or zoom layouts have become increasingly popular techniques. In essence, the web page design uses CSS media queries to respond to the dimensions of the browser viewport. For example, perhaps a single column would be shown on a mobile device but the content would re-flow into two columns on a higher-resolution desktop browser.

Modernizr 2 allows you to test media queries in JavaScript, e.g.

if ("screen and (min-width:641px)")) // do something

This could be useful when loading further resources which wouldn’t be appropriate on a smaller screen, e.g. large banner adverts.

New Plugin API

You can now write your own test methods when a feature is not supported by Modernizr. The basic syntax is:

Modernizr.addTest(str, function);

Let’s create a simple example which detects whether the current window is a pop-up:

Modernizr.addTest("popup", function(){
	return !!window.opener;

If our page is running in a pop-up window, a .popup class is applied to the HTML element and Modernizr.popup will return true. Otherwise, the HTML element will have the class .no-popup.

Vendor Prefix Detection

The .prefixed() method returns the appropriate prefixed or non-prefixed name variant for a property supported by the browser, e.g.

var t = Modernizr.prefixed("transform");

The value of t would be “WebkitTransform” in webkit browsers and “MozTransform” in Firefox 4. Useful stuff.

Custom Build Tool

While it isn’t a new, it’s worth mentioning Modernizr’s custom build tool which allows you to pick the browser tests you require. It’s a great feature which can significantly reduce the size of the resulting script. I’d recommend similar modular facilities if you’re developing your own JavaScript libraries.

Do you use Modernizr? Will you start using it now?

  • Alec Rust

    Actually, the main thing that Modernizr 2 brings is a fatal bug in IE7 rendering:

    Don’t use Modernizr 2 until this fix has been rolled in to the release version.

  • iackay

    The version in Github is now fixed. Great turn around on that.

  • IT Mitică

    Once again, I’m not convinced.

    For web apps, it seems invaluable to me. But for web pages, there is still too much to rely on to make it 100% viable.

    The way I see it, old browsers don’t need it because it will make them even more sluggish (and I opt for the case where the page gracefully degrades for them), and for the new browsers I have pure CSS solutions, I don’t need to rely on a JS library for layout.

    Seems to me more like a beginner to intermediate in web dev tool, or, like I said, invaluable for web apps.

    • Paul

      @IT Mitica
      What’s the difference between a web app and a “web page”? That makes no sense. Most “Old browsers” that are even worth developing for support JavaScript and CSS, and thus, you can target the lack of CSS3/HTML5 support for those browsers with Modernizr.

      • IT Mitică

        From my point of view (feel free to correct or amend me) web apps are the likes of cPanel or facebook or mail interfaces like the new Yahoo! Mail beta.

        For these ones, there is a massive JS code involved, and without this JS code, the pages lose functionality or simply don’t work.

        On the other hand, I see web pages as being those made for the larger “unauthenticated” public, that need to work and be accessible without imposing conditions outside the html markup.

        Yes, most “Old browsers” that are even worth developing for may be supporting JavaScript and CSS, but JS and CSS is suppose to only enhance the surfing experience, not to be the deux ex machina for it.

    • You shouldn’t require Modernizr in most situations, especially if we’re talking about content-only websites. After all, does it matter that IE8’s showing square rather than rounded corners?

      However, there are situations when it’s useful. How to Create Blurred Text Effects in CSS3 describes one case. Or perhaps you need to detect HTML5 features such as canvas, SVG, audio or video. In those cases, you can either load a shim to make them work in IE6/7/8 or show alternative content and avoid loading large chunks of JavaScript code.

  • Anonymous

    Is Modernizr available in CDN?

  • Dated Jury

    Is there a CDN where Modernizr 2 can be used?

    • It’s being considered at Google code, but I couldn’t find a reliable one. That said, I’d recommend using the custom build — you’re unlikely to require every test.

  • Justin

    Awesome! I just downloaded 2.0.4 for my blog. Going to tinker around with geolocation.

  • Brian Lang

    Are there any implications of swapping out Modernizr 1.6 for 2.0?

Get the latest in Front-end, once a week, for free.