Modernizr 2.0 came out more than eight months ago; we’ve not sat still in the period since, and today we’re proud to announce the release of Modernizr 2.5, our biggest update yet!
More than 60 new feature detects for emerging browser features; check out the full list or peruse all of the community-driven tests in our feature-detects folder.
Brand new embedded and included micro-libraries: html5shiv 3.2 and yepnope .js 1.5.
Modernizr.prefixed() can now detect prefixed DOM features and give you a hook. E.g.: Modernizr.prefixed('requestAnimationFrame', window) // rAF function
Bugfix for possible false negative when browser support for prefixed CSS Transforms is sunsetted.
Modernizr 2.5 introduces some minor backwards-compatibility breaks due to changes in features and behavior.
We no longer include Respond.js in the builder. If you still require Respond.js in your project, just include it manually.
Modernizr._domPrefixes has been renamed to Modernizr._cssomPrefixes, and a new, lower-case Modernizr._domPrefixes has been introduced.
We’ve removed KHTML prefix testing, due to lack of usage.
We encourage all users to upgrade to Modernizr 2.5, as there should be no regressions. If you do happen to encounter issues, please file them on github.
Thanks
This great release would not have been possible were it not for the many contributions from people who volunteered bug reports, bug fixes and all new tests. We’ve made a dedicated page to thank everyone who contributed to Modernizr 2.5; this release has been the most collaborative effort yet for Modernizr, and we couldn’t be more excited about that.
We’re similarly excited to announce the expansion of the team. Ryan Seddon has been made an official member at last, and we also welcome Alexander Farkas to the team. And speaking of Ryan, he’s done a great Learnable course on Modernizr, so if you’re relatively new to the library you should check it out!
Elsewhere
While not a Modernizr effort, we do want to bring some attention to a very useful new reasource, ideal for people who use Modernizr: HTML5 Please. Together with Can I Use…, these two sites should cover all your questions over which features are reliable and safe to use based on what audiences you need to support.
Modernizr 2.5 is the best starting library for anyone taking advantage of the latest in HTML5 and related technologies, and we hope you’ll enjoy it.
Update Feb 8: we’ve included another couple of small—but significant—updates, and have released Modernizr 2.5.2.
Notably, this latest update includes html5shiv 3.3, which features an up to 16x performance increase over the shiv that was bundled in Modernizr 2.0. The html5shiv team (Jonathan Neal, John-David Dalton, and Modernizr team member Alexander Farkas) has been hard at work (view changelog) making this foundational piece of the HTML5 infrastructure fast and robust. (To be clear, this is the exact same shiv available in Remy Sharp's googlecode repos.) Plus, using Modernizr 2.5 (with the included html5shiv 3.x), you no longer need innerShiv; the fix is automatic.
We also want to highlight a few more changes from 2.5:
We’ve toughened up canPlayType checks for Firefox 3.5.0, 3.5.1 and 4.0.0 - 4.0.4
In iOS5 Private Browsing mode you can use localStorage.getItem but it throws an exception for setItem. We test it out and set Modernizr.localStorage to false if we cannot store.
We now have a <datalist> detect with no false positives! It’s accessible through Modernizr.input.list [#146]
If you use the transitionEnd event, we’ve documented the correct IE10 and spec’d behavior.
If you, by chance, have a class of oh-no-js-oh-my on the <html> element we wont remove it anymore as part of our no-js to js switch.
Sometimes, members of the team get asked how we ascertain and verify that the features we detect are accurately detected. It’s not always a simple process, but over time we’ve put together a test suite that helps us out a lot.
Paul has recorded a screencast discussing how this test suite for Modernizr was built. The brief summary: initially built with QUnit, the test suite has coverage over the full API surface area of Modernizr, even using kangax’s detect-global script to assure no globals are introduced beyond Modernizr and yepnope. After that it gets interesting—as verifying the results from Modernizr’s detection of the current browser’s features isn’t straightforward. We end up using APIs from both Caniuse.com and Github, using projects like Lloyd Hilaiel’s JSONSelect, Lindsey Simon's ua-parser (ported to Node by @tobie), some ES5 polyfills, and some real sexy jQuery Deferred action to elegantly handle a bunch of $.getScript calls.
20 minutes of javascript and feature detection action below.
Modernizr and Content Delivery Networks (CDNs)
One of the most common requests around Modernizr is for it to be made available on a Content Delivery Network. Back in the 1.x days this made a fair bit of sense: there was only one version of the library, and so the compressed version would be useful to have on a CDN for performance reasons.
With the advent of Modernizr 2, however we’ve (re)introduced modular builds of the library, which make the value of CDNs less self-evident. We now make you create a customized build of Modernizr—using only the tests you actually need—when you want a production-ready, minified & compressed version of the library. But with over 40 embedded tests, supporting all possible combinations of tests is impossible, aside of being downright undesirable.
This has caused some confusion, so we’d like to explain the right way to use Modernizr under the various different scenarios that occur.
Development, local: General development and/or learning
When you start building a new project, or if you simply want to learn, you should download the latest development version of Modernizr. This is typically a stage where you don’t know yet which feature detection tests you’ll eventually need by the time you go to production, and don’t need to worry about minification. If you’re building your site or app locally, this is the version to use.
Development + CDN: Test cases, one-offs, partial control-situations
If you’re creating a quick test case using something like jsfiddle, or are writing an entry for a contest like 10K Apart, using a CDN can be not just useful, but downright necessary. If your situation relies on externally-hosted code, use one of the CDN releases.
But be warned: these versions contain all 40+ tests! That means they are full-fledged libraries with almost certainly a lot of things you don’t need in a final product.
That’s why the Microsoft CDN and CDNJS releases of Modernizr are essentially just Development versions, but hosted somewhere for you to use.
Custom build: All production uses
Are you priming your website or app for production? Then it’s time to head over to the custom download builder, tick all the tests your project makes use of, and hit that Generate button to make your own special build.
All production uses of Modernizr should be using a latest custom build from the site. This ensures that you won’t run into any (old) bugs, and will have the absolute minimum amount of code and execution time needed for the best possible performance.
As an added bonus, these custom builds now include a directly-usable Build link that allow you to make small tweaks—change a setting here or there—without having to figure out your requirements all over again. It’s also helpful whenever a new stable build is released: just revisit that Build link from your custom build’s source, hit Generate again and you have a new, updated stable build. Always be sure to test!
We hope this simple guide helps you figure out when to use what version of Modernizr.
Modernizr 2
The long wait is over—Modernizr 2 is here! Modernizr 2 takes feature detection to the next level, enabling a powerful new approach to building great websites and applications that elegantly respond and adapt to the user’s environment.
What’s new:
Media Query testing: Modernizr.mq('only all and (max-width: 600px)') // true
Conditional resource loading via Modernizr.load() — powered by yepnope.js;
…and a completely revamped, much more detailed Documentation page.
Modernizr 2 now contains 40 feature detection tests, but only the development version will come bundled with all of them. When you are ready to get a compressed and minified production build, simply go to the Download page and pick and choose only the tests and features that you need. This way, we ensure that your production build will have the absolute smallest footprint and fastest execution time possible.
A little tip: when you make a custom build, your URL will be adjusted to reflect your choices exactly. Bookmark it after building in case you ever need to go back and adjust your settings!
We know you might need to detect more than what’s available in the Modernizr core. Keep an eye on our feature-detects folder for the best-of-breed detections for everything.
Want to learn how to do conditional resource loading with Modernizr.load()? Our new documentation comes with a great Modernizr.load tutorial that takes you through the basics and gets you started. Alternatively, you could check out our site’s own modernizr.com-custom.js for some inspiration.
We’d love to get your feedback on the new Modernizr, the new site and our new documentation and resources pages. Let us know via Twitter, especially if you come across a bug somewhere—things are still a little rough around the edges here and there, but we figured you’d prefer to have Modernizr 2 sooner rather than later.
A huge thanks goes out to all of our contributors who provided code for additional tests, helped us with debugging and getting our detection algorithms right, and so much more. Additionally, special thanks go out to Simon a.k.a. Simurai, for crafting some fancy CSS3 buttons for us, Ryan Seddon for integration work, and Aaron Gustafson for making sure our ARIA roles were top notch.
— Team Modernizr (Faruk Ateş, Paul Irish and Alex Sexton)
Modernizr 1.7 changelog
We put 1.7 live some time ago but never got around to publishing a changelog. Since people have been asking, below are the core changes. For an exact changelog, see the commit log on github between 1.6 and 1.7.
At the heart of 1.7 are the following major changes:
A weaker, less crash-prone test for WebGL
A fix for @font-face in certain browsers
Faster Drag & Drop test
Updated IE Print Protector for better speed and reliability
One less content reflow due to better className setting
Beyond these main changes, 1.7 fixes lots of small bugs like tiny memory leaks and the occasional false returns in certain browsers.
A small update on the Modernizr 2 front: we’re getting very close to releasing it, so if you encounter any major bugs using either 1.7 or the 2.0 beta builder, please report them on github as soon as possible. We already have a lot of issues and features pushed to our planned 2.1 release, but would love to make sure that the 2.0 release is the absolute best version of Modernizr yet.
Modernizr 2 Beta
A brand new year, a brand new Modernizr! What’s new in 2011:
A new addition to our team, Alex Sexton
We’re introducing a new builder, so you can customize your download of Modernizr to suit your needs
But first, let’s quickly recap what happened in 2010, which was a fantastic year for Modernizr. We had the major 1.5 release really hitting it big, the incremental 1.6 and small site update, and finishing off the year by winning the Open Source Application of the Year category at the 2010 .net Awards. We’d like to thank all of our contributors for their hard work making this such a great open source application. But looking forward to 2011, we have so much more in store for you that 2010 will appear mundane by comparison.
We’re kicking it off with some pretty exciting news right away. First, we’ve expanded our team to include Alex Sexton. Due to this addition we’ve also formalized our individual roles in the Modernizr Team, as such:
Second, Alex has been working on something we’ve all wanted since the day Modernizr was released, and that’s the ability to customize your own download of the library to only include the tests that you want. This functionality was kept out for simplicity’s sake originally, but has become sorely needed since then. Thanks to Alex, Modernizr 2 will have this functionality—and even better than originally imagined, too. The original plan involved a server-side compiler, but Alex’s fine work, unofficially named Modulizr, has brought us an all-client side builder.
Best of all: you can start playing around with it right now because today we’re launching the first beta of Modernizr 2!
This very first beta introduces the customizability of Modernizr 2, allowing you to pick and choose the tests you want in your production-optimized download. We’d love to get your feedback through use of the (beta) builder, so please head on over the beta page and configure your preferred download of Modernizr.
Looking beyond the beta, our road map for Modernizr already includes specifics for a 2.1 release. We’re committed to getting Modernizr 2 finished and out in the open as soon as possible, and will have more announcements for you in the near future. For now, enjoy the beta and have a fantastic 2011!
— Team Modernizr
Modernizr 1.6 & The Road To 2.0
Today we’re announcing the new Modernizr 1.6, an interim release in the run-up to the upcoming Modernizr 2.0—a release slated for later this year which will take the library to the next level.
Before we get into what’s new in 1.6, we want to quickly thank Darcy Clarke for his quick but handy CSS tweaks to our site, cleaning things up a little and improving legibility. Much like today’s 1.6 release, these changes to the site reflect some of what’s coming up in the new 2.0 release and the “2.0” website, if you will.
As said, Modernizr 1.6 is an interim release and closes some important issues while adding a few new detections. Besides bringing it down to a mere 3.8Kb minified and gzipped, the biggest improvement is a completely revised @font-face test, which fixes the FOUT—Flash Of Unstyled Text—which was a somewhat common issue when combining Modernizr with Typekit.
We’ve also added support for WebGL, Touch events, Flexible Box Layouts and Inline SVG. Additionally, several existing tests have been improved to better support newer browser releases, as well as fix some minor bugs.
There are some important changes in 1.6: first, the Modernizr.websqldatabase test has been simplified. It no longer creates a database, which solves an annoying Safari pop-up issue and stops Modernizr from littering the web with databases, but it comes at somewhat of a cost: Chrome in Incognito mode will now false-positive on this test. The extended test remains commented-out in the non-minified source, for those who need it to be exact.
Second, we’ve deprecated two properties: Modernizr.crosswindowmessaging and Modernizr.historymanagement. Going forward, these two properties are simply:
Modernizr.postmessage
Modernizr.history
Simpler, cleaner, and they now match the actual DOM property they’re testing for. Keep in mind that, as with other tests, the Modernizr property is all-lowercase but the actual DOM property is window.postMessage.
Lastly, we’ve put the oft-requested CSS text-shadow test in this release. It still false-positives in Firefox 3.0, but we think web designers are okay with that these days.
We hope you enjoy this new release, and stay tuned for big changes with the upcoming Modernizr 2.0!
We're proud and pleased to announce the immediate release of Modernizr 1.5!
Rather than an incremental upgrade, we've opted to shift into a higher gear and add the full shebang of what we've been working on. Here's a list of new things we detect:
Additionally, IE can now print HTML5 elements (courtesy of @jon_neal's print protector), IE9 should be fully supported (let us know if you discover inconsistencies), and we also support more browsers: older Safari versions, Nokia and Blackberry mobile browsers, and Konqueror via the -khtml- prefix. Detection of Opera's CSS3 support for transitions and transforms was fixed, as well.
A few big things have kept us busy preparing a good release. Flash detection (Flash Blockers included) became a hot topic and we really wanted to include it, but at the time no reliable or complete mechanism was available. We wanted to include (and still recommend) Mark Pilgrim's excellent Flash Block Detector but decided that it was too large a codebase to include in the default release of Modernizr—especially given the modular Modernizr 2 plans on the horizon—and so Flash detection is out for now.
Then came the discovery that Google Chrome implemented Touch events even on the desktop (why, Google, why?) paired with the regrettable fact that Palm's WebOS browser doesn't support common Touch events at all. For a browser that only exists on touch-based devices, this was too critical an issue for us to ignore. So Touch testing went out again, too.
We have many more features we'd like to include; please visit the Github issue tracker to review all the additional tests.
For developers, contributors and people looking to learn from Modernizr we now have a set of unit tests available on the Github repository, courtesy of Paul. These help prevent errors and inconsistencies from finding their way into the source code, making Modernizr more robust and reliable. The unit tests also include a second part, which pulls the data tables in from Find Me By IP and creates a feature parity overview for all the browsers.
Thanks for all the input and code to miketaylr, fearphage, kangax, richbradshaw, @itpastorn, @jon_neal, dshaw, itrelease, mathiasbynens, airportyh, jeffsmith, rjcoelho, lucideer, peol and mislav. The high quality of this release wouldn't be possible with input from experts like these.
We hope you enjoy the hard work we've all put into it, but we'd love to hear your feedback on Modernizr 1.5's new changes, so let us know via Twitter what you think!
Updates on the Modernizr front
As you've undoubtedly noticed, it's been relatively quiet on the Modernizr front from our side, with no news or new releases since the start of the year. Nonetheless, everyone else has started getting more and more busy using Modernizr to enhance their sites without sacrificing control over older browsers. Progressive Enhancement is becoming increasingly commonplace and we couldn't be more excited about that.
So where do things stand? Well, we've been working, over on Github, at getting the next release of Modernizr ready, version 1.2. We're not quite there yet, but we are setting a planned release date of Thursday, April 22. Every time we're almost there another new feature or issue pops up that we have a hard time excluding from the next release, but it's more important to iterate regularly than do big pushes for a tool like this.
Related to all this has been an increasing effort towards realigning Modernizr; the site isn't what it could and should be, the community around Modernizr isn't as cohesive yet which leads to fragmented and overlapping efforts in promoting the tool, and the explanation of what Modernizr is and how it works is still lacking. Clearly, lots of room for improvement—and we're not just aware of it, we're working to fix it.
One of the biggest issues of the current site is the static-ness of it. For instance, we really want to promote sites that use Modernizr, but there's no easy way to submit your site to us. This and many other things will be addressed in the redesign.
The absolute biggest announcement is saved for last, and that is: Modernizr 2.
Early on, before Modernizr was released yet, my friend Mike Krieger and I were brainstorming on how to offer Modernizr. Initially, my plan had been to offer some configuration tool wherewith you could specify which features you wanted to test for, and download a customized build of Modernizr that suited your needs. Mikey and I got all excited by the possibilities of tracking this data, observing which features web designers & developers were most interested in, and so forth.
Then we realized that this brought about a ton of complexity, far too much for the introduction of the library. So, we dropped that idea and instead focused on making a simple, easy to use toolkit without any complexity in how to get it: just download it, include it and you're set.
Well, turns out that the idea itself wasn't a bad one, it was just too ahead of its time. As the Modernizr library grew its feature-set, it also grew its footprint and execution time. Thanks to the talents of Paul and the many contributors committing code over on Github, it has stayed incredibly lean and fast—but also at the cost of things we'd really like to add, like SVG.
SVG is an oft-requested feature for Modernizr to test against, and we really want to add it. But, to do it right would involve doing not just a basic one-line test against something like "window.SVG"—no, you have to do a very large number of tests so you can accurately report what parts of SVG the browser supports. To add that to Modernizr right now would bloat the library and slow it down, even though most users won't make use of it.
With Modernizr 2 we'll be breaking things up a little and allow you to customize your download if you so choose to. There will still be one simple, default download containing the core features of the library, but for advanced users there will be a configuration tool so you can pick and choose and add (or subtract) all the features you want.
So those are some of the updates on Modernizr. Next week Thursday we hope to release version 1.2 so if all goes well, you'll hear from us again soon.
2009 is a wrap
Since we launched with the first public release of Modernizr on July 1st of last year, we have seen some exciting things happen. The library itself has gone from a humble 0.9 beta to a rock solid 1.1 release, almost doubling the amount of features detected whilst maintaining a small codebase and a lean, fast execution of the script.
These developments have not gone unnoticed: searching the Web for "Modernizr" in June of last year produced only a couple dozen results, all from people misspelling "modernizer"; today, there are over 56,000 pages on the Web talking about it. Mark Pilgrim's upcoming book, Dive Into HTML5, discusses Modernizr in great depth, and the CSS Cookbook, 3rd Edition features it as well.
The Modernizr.com website itself didn't sit still either; we welcomed well over 90,000 visitors, expanded with Documentation and News areas, endured two Google AppEngine downtimes and got some great feedback on how to better present and explain Modernizr to new visitors.
Of those 90K+ visitors, we have some interesting browser statistics to share with you:
Firefox is still the web browser of choice for developers, accounting for 49% of all our visitors;
Safari comes second with 30%; not a huge surprise as more and more web designers and developers switch to the Mac, and Safari's built-in Web Inspector is a handy alternative to several Firefox plugins for debugging websites with;
Chrome is picking up momentum as well, guiding almost 9% of our visitors, leaving…
…Internet Explorer and Opera to battle for the remainder, together with a hodgepodge of miscellaneous browsers and browser versions.
On the Operating System's side, we see the Mac platform edging out Windows just barely: 46.8% versus 46.5%. The various Linux flavors accounted for about 6% of visitors.
Looking at our screen resolutions data, I was amused and intrigued: its pie chart for Modernizr.com's visitors looks like a Trivial Pursuit logo, with almost equal shares for 1440x900, 1680x1050, 1920x1200, 1280x800, 1280x1024, with the last slice made up of all the remaining resolutions. Clearly there is no overly-dominant single resolution among web designers, but it's good to know the vast majority of our visitors has at least 1280 horizontal pixels available.
Looking ahead to 2010, we hope you'll continue to enjoy using Modernizr and perhaps even contribute to make this JavaScript library more versatile and useful as a tool for cutting-edge web developers.
Modernizr