What’s New in Modernizr 2

Share this article

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 (Modernizr.mq("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?

Craig BucklerCraig Buckler
View Author

Craig is a freelance UK web consultant who built his first page for IE2.0 in 1995. Since that time he's been advocating standards, accessibility, and best-practice HTML5 techniques. He's created enterprise specifications, websites and online applications for companies and organisations including the UK Parliament, the European Parliament, the Department of Energy & Climate Change, Microsoft, and more. He's written more than 1,000 articles for SitePoint and you can find him @craigbuckler.

browserCSSCSS3feature detectionHTML5 Dev CenterHTML5 Tutorials & Articlesmodernizr
Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week
Loading form