Modernizr: Latest News

Modernizr 3, Stickers & Diversity

2013-04-02T00:00:00-07:00

While Modernizr was meant from day one to eventually become unnecessary, that day is far from here, and so development on the library goes on. Some of the things we’ve been busy with:

Version 3

Modernizr v.3 is not a mere version bump with some new additions; it is a complete architectural rewrite of the entire library and all of the 150+ community feature tests. The team and some of our great contributors have worked tirelessly to convert all of the tests to facilitate a new loading structure based on AMD, and are currently embedding the tests with important meta-data such as known issues, sample usage and more.

There is a new site in the making as well, with a new documentation page taking your feedback into account (feel free to fill out that survey if you haven’t yet), and a new download page that makes it much easier and faster to create the custom build that you need.

You can help make v.3 become a reality by closing issues, or by updating open Pull Requests to the new v.3-compatible format for tests (see this example for what that looks like).

Stickers!

While we work on version 3, you can show your support with some fancy new Modernizr stickers, courtesy of the fine folks at DevSwag. Put these stickers on your laptop, fixie bike, and anything else you’d like to “modernize” (ahem).

The stickers are just $6 for a pack of four, and all of the proceeds that go to Modernizr will be donated to the Ada Initiative. All of us here at Modernizr care deeply about having a healthy and diverse community of developers, and the Ada Initiative does great work that we support.

Diversity in tech & open source

The tech community, and in particular open source, is currently quite male-dominated. By itself that’s not so much of a problem, but it becomes more of one when it leads to increasingly male-specific behavior and cultures, which can be hostile and alienating to various groups—other men included.

Currently in tech, typically male behavior such as aggressiveness is rewarded with more visibility and, consequently, more opportunities. Discussions online, whether they’re about community diversity, ruby vs. python, or tabs vs. spaces, often devolve into a lot of verbal aggression, breeding an angry and hostile culture from which no one really benefits. Similarly, a harmless joke here or there isn’t a big deal, but the same kind of jokes over and over again breed a certain culture, and that culture is often exclusionary to people who don’t care for those jokes.

When this happens within a small group of people, it’s one thing. When it happens industry-wide, we’re excluding people from our field altogether, and that is a terrible thing that fundamentally undermines the meaning and value of our work. “Merit” is a total fallacy if you only allow a certain kind of people to be measured for it.

Our industry is vast and encompasses many different types of people. It is time to stop having this belief that tech, web development, or open source, is a community composed entirely of “other people who are just like us,” and that it gives us carte blanche for behaving however we want, or for saying whatever we want. Sexist, misogynist, racist, homophobic and otherwise exclusionary language, jokes and slurs—whether we put them in commits, source code, or comments to blog posts—are absolutely unacceptable.

It’s time for us to stop trying to get the industry or community to behave according to the rules set forth by the most vocal majority. Each and every one of us deserves to be respected and listened to, to not be shouted down by an angry mob.

We should not judge our peers solely by the quality of their code or pixels: that’s dehumanizing and wrong, and encourages individualism. It’s time for us all to embrace the diversity that we represent: different people from different backgrounds with different skills, ideas and opinions.

Since Faruk first started Modernizr in 2009, it has evolved through a collective, social effort. This wouldn't have been possible without the vast range of different contributors, each bringing their own unique slant. It’s ultimately this diversity that has allowed Modernizr to be the broad-reaching tool it has become — and it will only be able to continue to grow and improve if it sticks to and supports these ideals across the entire community.

Modernizr Policy on Browser Bugs and Feature Detects

2013-01-07T00:00:00-08:00

Modernizr detects features in browsers based on the APIs they expose to enable that feature. However, sometimes a browser vendor will implement a feature, but its implementation is buggy; for instance, its API exists but the output is not rendered, or the feature doesn’t work right—or even at all. This sometimes results in what we call “False Positives”: a feature that tests positively, but is not reliable or usable. (For example, Opera Mini provides a false positive for CSS Gradients.) Other times we might calls these plain “browser bugs,” issues in the implementation that doesn’t affect the common use but is an edge case issue. (For example, box-sizing doesn't work with min-height in Firefox.)

False positives are a developer’s nightmare: they can be hard to discover, even harder to fix, and are almost always frustrating. So what can we do?

Modernizr aims for accuracy in tests based on their associated ECMAScript, HTML and CSS specifications. Yet sometimes something slips past and it reports a false positive. We are in the process of documenting these cases and putting them in one single page for easy consumption.

Found a false positive?

When you encounter a false positive, add it to the Modernizr Issues tracker. We will give it the “False result” label. Also please clearly describe which browser(s) it is a false positive in, and whether the implementation is buggy, broken or incomplete.

Wherever possible, we will attempt to work around the issue (for example: forcing a reflow, adding the element to the DOM, etc), though as a last result we will add a UA sniff. We'd appreciate your help with a pull request, as well!

Above all: report false positives to their respective vendors’ bug trackers. (Many times it's a mobile port of WebKit that has the problem; while it may not exist in other WebKit ports, you can file these at the WebKit tracker regardless.) That is the best way to get these issues resolved, and helps Modernizr to be a great feature detection library.

Browser bug?

We agree that browser bugs should be detected instead of assumed for given UA strings. This is how jQuery.support works. However, Modernizr detects features and will not be collecting bugs. We do recommend you file the issue with the appropriate vendor and blog about it or post on Stack Overflow to get the word out there with your proposed fix.

Thanks

Modernizr will strive to report accurately, even if the browser is returning a false positive for the correct detect.

Modernizr 2.6.2 released

2012-09-04T00:00:00-07:00

Summer is over, back to work! We’ve released Modernizr 2.6.2 with a number of new detects, bug fixes, and test improvements for your modern development needs.

Some notable fixes include:

Fix for a hilarious edge case in Safari where if you set your body or html element to overflow-y: scroll and apply styles to the webkit-scrollbars (see demo), the browser spontaneously refreshes
HTML5 Shiv got a fix for better compatibility with jPlayer
Generated Content false-positive fix for IE7
Fix for our download builder and turning off css classes
Better Travis CI output for unit tests using grunt
All incoming pull requests are tested against our test suite with Travis CI

Detects

We’ve also added some new detects:

Content Security Policy
CSS's object-fit
position: sticky;
@supports : CSS's new native feature detection
viewport unit tests: vhunit, vmaxunit, vminunit, vwunit
input[form] attribute
new iframe attributes: sandbox, seamless, srcdoc
PointerLock API

Test improvements

And lastly, there have been updates to these tests:

background-size: cover
css filters
css subpixelfont
elem-track - reflecting partial support by IE10
gamepad api

For more details on the exact code changes of this release, see the full changelog on GitHub.

We thank our great dev community who have contributed much of the work for this update. Thanks to their moms and dads, too.

Modernizr 2.6 released

2012-07-19T00:00:00-07:00

Modernizr 2.6 is now available. Below is a summary of the major changes. The full diff is also available.

You can download the latest at the builder. You must upgrade if you're using geolocation or flexbox; otherwise you only should upgrade.

Detects

We’ve added a lot of new tests, many of which by the community, and updated existing ones:

Geolocation used to be a trivial detect but two issues have come up recently that make it trickier. If you're using your own detect, read the details.
The ESR release of Firefox exposes MozWebsocket whereas every other supporting browser uses the standard WebSocket. We've quickened and simplified our detect accordingly.
We got a last minute pull request from David Baron, the czar of Gecko, who recommended we don't allow Modernizr.testProp('pointer-events') to pass, and instead require the camelcased equivalent: pointerEvents
Opera fixed a bug affecting the <input type=color> detect, so we've sped up and simplified our detect.
Our detect for flexbox has been updated as the new spec had naming changes. The detect for the flexbox implementation that you see in older mobile WebKit is now available as flexboxlegacy (without a hyphen).
Our WebGL test got much faster, though it is less reliable. We made this decision because many Modernizr users include all tests they don't use and the earlier WebGL test could last for 500ms sometimes. If your site or app relies on the WebGL test, make sure you also have a fallback in case the context creation fails. It can fail due to inadequate GPU or lack of graphics memory, see also recovering from a lost context.
Plenty more inline documentation added about detection weirdness. The source comments are a fun read.
As well as tightening up support for existing tests, we've also added a number of new detects, many submitted by the community:
- blob-constructor
- css-backgroundposition-shorthand
- css-backgroundposition-xy
- css-calc
- css-filters
  - Detecting the new CSS filters, but not catching the legacy IE filter property.
- css-lastchild
- css-mask
  - This correctly finds the WebKit mask property without a false positive on Firefox's SVG mask support.
- css-regions
  - Contributed by Adobe.
- css-subpixelfont
- exif-orientation
  - Did you know iOS Safari is the only browser to use the orientation bit in EXIF and rotate the asset accordingly? Well, Modernizr does.
- forms-fileinput
  - Detecting <input type=file> not working on iOS <6
- dart
- network-xhr2
  - Which has an interesting testing story
- style-scoped
- svg-filters
  - Only detects SVG filters appling to SVG content. SVG filters on HTML is awaiting.
- vibration
- You can view all of these detects on GitHub and add them in the download builder today.

Dependencies

html5shiv is now up to 3.6, fixing some edgecases users ran into
yepnope was updated to 1.5.4

Development Workflow:

We're using EditorConfig to keep our whitespace policy consistent
GruntJS powers our automatic linting and minification now.
We are integrated with Travis, so after all commits, Travis runs our test suite in a headless WebKit via PhantomJS.

Up next, we're going to clarify our touch detect: Is it detecting touch devices or touch events; and which touch event model? We're also going to redesign the download page and update the documentation with some more approachable documentation.

As always, if you'd like to get involved, hop into the GitHub issue tracker.

Modernizr 2.5: Supercharged for 2012

2012-02-06T00:00:00-08:00

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!

New in 2.5

The list of new things in 2.5 is too big for GitHub to handle, but here are the highlights:

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.
We now have a super robust and integrated test suite. Paul did a great video detailing how it works.
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.
We now ship with a Function.prototype.bind polyfill included by default. You’re welcome!

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.

We’d also like to note that our HTML5 Cross Browser Polyfills wiki is still growing, with many more polyfills having been added.

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.

Additionally, our download builder now ships with Yepnope 1.5.2.

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.
The Modernizr wiki has been reorganized. Much cleaner!

How Does Modernizr’s Test Suite Work?

2011-11-07T00:00:00-08:00

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)

2011-09-01T00:00:00-07:00

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

2011-06-01T00:00:00-07:00

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;
Vendor prefix detection
Modernizr.prefixed('transform') // 'WebkitTransform'
A whole new set of extensibility methods, so its easy to augment the Modernizr tests with your own.
A brand new site!
…with the custom build tool baked right in;
…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

2011-05-12T00:00:00-07:00

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

2011-01-17T00:00:00-08:00

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
A first beta release of Modernizr 2!

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:

Faruk Ateş: Project Lead
Paul Irish: Lead Developer
Alex Sexton: Developer

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

2010-10-25T00:00:00-07:00

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!

Download the new Modernizr 1.6 from the front page

Modernizr 1.5: new features, unit tests added

2010-06-14T00:00:00-07:00

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:

SVG! Including SVG Clipping Paths and SMIL
Web SQL Database
IndexedDB
Web Sockets
hashchange event
History and Session Management
HTML5 Drag and Drop
Cross-document Messaging

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.

Along with the 1.5 release comes a license upgrade: Modernizr is now dual-licensed under BSD and MIT.

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

2010-04-14T00:00:00-07:00

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

2010-01-04T00:00:00-08:00

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.

— Faruk Ateş and Paul Irish

This holiday season, give the gift of progressive enhancement with Modernizr 1.1!

2009-12-07T00:00:00-08:00

We’re delighted to bring you Modernizr 1.1, a handy upgrade to the increasingly popular HTML5 and CSS3 detection toolkit. Now that Modernizr is on GitHub we’re seeing contributions come in for additional features from many different people. We want to express special thanks to Remy Sharp, Mike Taylor, Jan Lehnardt, Fearphage and Ms2ger for their work pushing Modernizr forward.

All of us who work on and contribute to Modernizr feel that it is the best way to start taking advantage of HTML5 and CSS3 in your websites today, which is why this new release covers even more ground of both specifications. We’re heading towards supporting absolutely everything from the next generation of web technologies that is being implemented by any of the major browsers today, so that you as a developer know what you can and can’t expect from your visitors’ browser.

New in this release is detection for:

localStorage
sessionStorage
Web Workers
applicationCache
All new HTML5 input properties
HTML5 Audio and Video formats (supported codecs)

We also support CSS Gradients the way Firefox/Mozilla have them implemented (linear-gradient(…) and radial-gradient(…) ). We still support Safari’s syntax (gradient(linear|radial, …), and use the same “cssgradients” property on the Modernizr object for it. That means you’ll be responsible for covering both Firefox and Safari’s CSS syntax if you take advantage of this feature and are working with fallbacks for the other browsers.

If all of that still isn’t enough for you, Modernizr now features a simple plugin architecture so that you can add your own detection tests. To use the new addTest() method, please refer to the updated Documentation.

There is a lot more planned for Modernizr and this 1.1 release lays some of the ground work to reach that goal. We hope you enjoy this release and have a great month ringing out an exciting 2009.

— Team Modernizr

Small October Updates

2009-10-11T00:00:00-07:00

A couple of quick update for you today. First, Modernizr is featured heavily in Mark Pilgrim's upcoming Dive Into HTML5, which is being written and published online and will be available in book form upon completion. To get such prominent placement in one of Pilgrim's books is an honor, to say the least, but it especially strengthens our belief that progressive feature detection—which is what Modernizr does—is the best approach to web development today.

Second, we've added a site to the gallery: FindMeByIP.com uses Modernizr to tell you more than just your IP; it tells you what your browser is capable of. It's a beautiful design and we're excited to see Modernizr being used on it.

Lastly, there has been some feedback that the front page of Modernizr doesn't convey the value, purpose and benefits of the toolkit very well. These concerns have been taken into consideration and work is underway to change that. We definitely acknowledge that the real value of Modernizr isn't directly apparent, so we're planning to fix that. More on that hopefully soon.

GitHub'd

2009-09-26T00:00:00-07:00

Just a quick announcement that Modernizr is now available on GitHub. Hack away!

Modernizr, meet GitHub

2009-09-24T00:00:00-07:00

When Modernizr was originally released in July, requests came in right away for seeing it hosted on code repositories like Google Code or GitHub. The promise at the time was: "once it goes 1.0".

We had only one real reason for not doing so right away: the choice of which public repository service to use. At the time, Modernizr's code base was created and managed pretty much solely by myself, and my experience with these repositories was pretty limited. I didn't want to commit to one only to realize halfway through the next release that I preferred another.

Well, Modernizr has since gone 1.0 and not only that, but the project has a new code lieutenant. Paul Irish will take on the role of governing Modernizr's codebase, with me taking a slightly more backseat spot in overseeing the general direction of the project. In other words, I'll play a more directorial role whilst Paul will deal with the specifics of the library's codebase.

Paul's skill and talent is already widely recognized and we feel he is a great fit for the role of code lieutenant for Modernizr.

His first assignment was to choose a code repository he felt most appropriate for Modernizr. We discussed the various pros and cons with regards to our needs (codebase, feedback, support tickets and so on) and what each service provides, and the choice has settled on: GitHub.

In the coming days, Modernizr will start living on GitHub and the Modernizr.com site will be updated to direct visitors there instead. Once there, everyone will be able to contribute to and work on Modernizr directly, making the library even better. Meanwhile, please welcome Paul as formal code lieutenant.

Modernizr goes 1.0!

2009-09-05T00:00:00-07:00

I'm very pleased to announce Modernizr 1.0, the first major milestone release of the JavaScript library that detects native implementations of HTML5 and CSS3 features in browsers.

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 audio and 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 input type="range". All of these are combined into an array that's accessible from the JavaScript 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.

With all these new tests and additions and even a font glyph inclusion right there in the JavaScript, you may be wondering what the new file size is. The answer: 16kb normal, slightly over 7kb minified.

Important questions answered

Is Modernizr 1.0 fully backwards-compatible with 0.9?
Yes and no. As far as the JavaScript side is, yes, you should be able to just replace the old 0.9 with the new 1.0 file and adjust your script include path accordingly, and everything should Just Work.

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 .csstransforms or html.csstransforms.

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)

Additional note:
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 .no-js and .js to respectively determine whether JavaScript is disabled or enabled in the browser.

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!