Before I tell you about all the useful new features that Modernizr 1.0 detects for, I want to express my immense gratitude to, first and foremost, Paul Irish and Ben Alman. The two of them restructured most of Modernizr's 0.9 codebase, leaving it functionally intact but reducing the file size by a stunning 35% and improving performance here and there. I also want to thank John Resig, Mark Pilgrim, Leonid Khachaturov, John Tantalo and Peter Speck. All of whom have made contributions in direction and/or code.
So what's new in Modernizr 1.0? To start off, Modernizr 1.0 can now be included in the
head section of your website. We've changed its behavior so that it adds the classes—which represent each browser's native implementations—to the
html element instead of the
body element. See the notes below for details on this.
Let's get to the features! We now detect for native browser support for the HTML5
video elements, as well as the Geolocation API. We've also added a second test for Canvas, specifically for Canvas Text. This because various browsers support Canvas drawing but not yet Canvas Text, and the ability to draw text in a Canvas is rather significant and thus warranted its own test.
Moving on, we've added a series of tests for HTML5 input data types, such as
input type="search" and
Modernizr object, under
Modernizr.inputtypes. Full details are available in the new Documentation area.
Last and most certainly not least is the new
@font-face detection, courtesy of some more work by Paul Irish. That's right, with Modernizr you can now detect whether a browser will actually render embedded @font-face fonts or not. This, like everything else in Modernizr, is an actual feature detection test.
Note: we're cheating a little in the
@font-face test because we let IE5 and above pass the test directly; IE supports the standardized
@font-face syntax but it only supports EOT fonts. Browsers that support
@font-face font embedding with OpenType and/or TrueType fonts are tested using a custom one-glyph font that Paul created, and which is now part of Modernizr in Base64.
Important questions answered
Is Modernizr 1.0 fully backwards-compatible with 0.9?
However, as mentioned above, the CSS side has one crucial change: Modernizr 1.0 adds the various class names to the
html element instead of, previously, the
body element. Thus, if your CSS rules say
body.csstransforms, you'll have to change them to read either just
Is this valid?
Yes, under HTML5—which is what Modernizr is meant to be used under—it is perfectly valid to put a
class attribute on the
html element. It works just fine on HTML4 and XHTML documents, but it won't validate. (but remember: validation is a tool, not a goal)
Modernizr 1.0 also checks for (and if found, removes) the class
no-js from the
html element. In its place, it adds the class
js, which means that if you start your templates with the code
<html class="no-js"> and then include the Modernizr library, you can use the classes
Will Modernizr go on GitHub / Bitbucket / similar now that it is 1.0?
Yes, very soon it will get hosted on a public repository so that people can contribute a little more directly. We haven't decided yet which one, but no new releases will be made until it's hosted publicly.
What do you have planned for the next release?
Wait and see! Fortunately, we've now added a News section and RSS feed to Modernizr.com, so you can simply subscribe to the feed and we'll keep you posted of all things Modernizr.
Now go and download Modernizr 1.0!