Modernizr) that contains the results of these tests as boolean propertieshtml element that explain precisely what features are and are not natively supportedWith this knowledge that Modernizr gives you, you can take advantage of these new features in the browsers that can render or utilize them, and still have easy and reliable means of controlling the situation for the browsers that cannot.
@@ -85,107 +83,15 @@The name “Modernizr” might throw you for a second, we’ll admit. The library does allow you to use the new HTML5 sectioning elements in IE, but aside from that, it doesn’t modernize any other features. The name Modernizr actually stems from the goal of modernizing our development practices (and ourselves). However! Modernizr still pairs extremely well with scripts that do provide support when native browser support is lacking. In general, these scripts are called polyfills.
+The name “Modernizr” might throw you for a second, we’ll admit. The library does allow you to use the new HTML5 sectioning elements in IE, but aside from that, it doesn’t modernize any other features. The name Modernizr actually stems from the goal of modernizing our development practices (and ourselves). However! Modernizr still pairs extremely well with scripts that do provide support when native browser support is lacking. In general, these scripts are called polyfillsstrong>.
polyfill (n): a JavaScript shim that replicates the standard API for older browsers-
So a websocket polyfill would create a window.WebSocket global with the same properties and methods on it as a native implementation. That means you can develop for the future, with the real API, and only load your compatibility polyfills on browsers that do not support that API or feature.
And good news for you, there is a polyfill for nearly every HTML5 feature that Modernizr detects. Yup. So in most cases, you can use a HTML5 or CSS3 feature and be able to replicate it in non-supporting browsers. Yes, not only can you use HTML5 today, but you can use it in the past, too!
- -But that leads to a big, fat warning: just because you can use a polyfill doesn’t mean you should. You want to deliver the best user experience possible, which means it should be quick! Loading five compatibility scripts for IE7 so it looks and works the exact same as Chrome and Opera isn't a wise choice. There are no hard and fast rules, but keep in mind how adding more scripts to the page can impact the user experience. And remember, none of your users view your site in more than one browser; It’s okay if it looks and acts differently.
- -Now for more on how to effectively use and serve polyfills for all your different users, read on…
- - - - - -Modernizr.load is a resource loader (CSS and JavaScript) that was made to specifically to work side-by-side with Modernizr. It’s optional in your build, but if you are loading polyfills, There’s a good chance it can save you some bandwidth and boost performance a bit.
Modernizr.load syntax is generally very easy to understand, so we’ll start with a basic example:
-Modernizr.load({
- test: Modernizr.geolocation,
- yep : 'geo.js',
- nope: 'geo-polyfill.js'
-});
-
-
- In this example, we decided that we should load a different script depending on whether geolocation is supported in the host browser or not. By doing this, you save users from having to download code that their browser does not need. This increases page performance, and offers a clear place to build a healthy amount of abstraction to your polyfills (both 'geo.js' and 'geo-polyfill.js' would seem the same to the rest of the app, even if they're implemented differently).
- -There’s a good chance that you’re not terribly unhappy with your script downloading speeds now, but you’ll be happy to know that Modernizr.load does not slow anything down, and can sometimes offer a small boost in performance by loading scripts asynchronously and in parallel. There’s a lot of variables to weigh in this area, so we suggest that you try a few things to make sure you’re getting maximum performance for your specific situation.
Modernizr.load is small and simple, but it can do quite a bit of heavy-lifting for you. Here is a slightly more complicated example of using Modernizr.load when your scripts rely on more than one Modernizr feature-test. A good technique is to wrap up multiple polyfill scripts into a single 'oldbrowser' type script, that way you don’t end up loading too many scripts at once. Here's how that might work:
-// Give Modernizr.load a string, an object, or an array of strings and objects -Modernizr.load([ - // Presentational polyfills - { - // Logical list of things we would normally need - test : Modernizr.fontface && Modernizr.canvas && Modernizr.cssgradients, - // Modernizr.load loads css and javascript by default - nope : ['presentational-polyfill.js', 'presentational.css'] - }, - // Functional polyfills - { - // This just has to be truthy - test : Modernizr.websockets && window.JSON, - // socket-io.js and json2.js - nope : 'functional-polyfills.js', - // You can also give arrays of resources to load. - both : [ 'app.js', 'extra.js' ], - complete : function () { - // Run this after everything in this group has downloaded - // and executed, as well everything in all previous groups - myApp.init(); - } - }, - // Run your analytics after you've already kicked off all the rest - // of your app. - 'post-analytics.js' -]); -- -
There’s a lot that you can do with Modernizr.load. It was released standalone as yepnope.js but it was made specifically with Modernizr and feature-testing in mind. You can check out the full docs for Modernizr.load at yepnopejs.com.
One cool feature of Modernizr.load is it’s complete decoupling of load and execution of scripts. That might not mean much to you, but users of the HTML5 Boilerplate might be familiar with the Google CDN copy of jQuery fallback. It looks something like this:
- <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
- <script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.1.min.js">\x3C/script>')</script>
-
- It works by trying to load in the script, and then immediately after, testing to see if the jQuery object is available. If It’s not, then they load a local copy of jQuery as a fallback. This is generally not that easy in script-loaders, but Modernizr.load has got you covered. You can just use the same logic, and Modernizr.load will handle the execution order for you:
-Modernizr.load([
- {
- load: '//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js',
- complete: function () {
- if ( !window.jQuery ) {
- Modernizr.load('js/libs/jquery-1.7.1.min.js');
- }
- }
- },
- {
- // This will wait for the fallback to load and
- // execute if it needs to.
- load: 'needs-jQuery.js'
- }
-]);
-
-
- A quick note, though: only use this technique as a method for fallbacks, because it can hurt performance by forcing scripts to load in serial instead of in parallel.
- -Modernizr.load is extensible as well. You can load your own prefixes and filters for your scripts. For more advanced information on that, you can check out the docs on the yepnopejs.com homepage. You can even go as far as to replace entire steps of the loading process and replace them with custom logic. So start using it and saving those precious, precious bytes.
So a websocket polyfill would create a window.WebSocket global with the same properties and methods on it as a native implementation. That means you can develop for the future, with the real API, and use a compatibility polyfill on browsers that do not support that API or feature.
There is a polyfill for many of the HTML5 features that Modernizr detects, but that leads to a big, fat warning: just because you can use a polyfill doesn’t mean you should.
+You want to deliver the best user experience possible, which means it should be quick! Using loads of compatibility scripts for IE9 so it looks and works the exact same as Chrome and Opera isn't a wise choice. There are no hard and fast rules, but keep in mind how adding more scripts to the page can impact the user experience. And remember, most of your users only view your site in one browser; it’s okay if it looks and acts differently.
Many tests in the documentation come with a small code sample to illustrate how you could use that specific test in your web development workflow. Actual use cases come in many more varieties, though. The possible uses of Modernizr are limited only by your imagination.
-If you’re really interested in the details of how Modernizr works, look at the source code of modernizr.js and the various feature detects, and dig into the project on GitHub.
+If you’re really interested in the details of how Modernizr works, look at the source code, and get involved in the discussions on GitHub.
If Modernizr.canvas tests false, you may want to load FlashCanvas or excanvas.