Modernizr Rocks HTML5
- by Laila
HTML5 is a moving target. At the moment, we don't know what will be in future versions. In most circumstances, this really matters to the developer. When you're using Adobe Air, you can be reasonably sure what works, what is there, and what isn't, since you have a version of the browser built-in. With Metro, you can assume that you're going to be using at least IE 10. If, however, you are using HTML5 in a web application, then you are going to rely heavily on Feature Detection. Feature-Detection is a collection of techniques that tell you, via JavaScript, whether the current browser has this feature natively implemented or not Feature Detection isn't just there for the esoteric stuff such as Geo-location, progress bars, <canvas> support, the new <input> types, Audio, Video, web workers or storage, but is required even for semantic markup, since old browsers make a pigs ear out of rendering this. Feature detection can't rely just on reading the browser version and inferring from that what works. Instead, you must use JavaScript to check that an HTML5 feature is there before using it. The problem with relying on the user-agent is that it takes a lot of historical data to work out what version does what, and, anyway, the user-agent can be, and sometimes is, spoofed. The open-source library Modernizr is just about the most essential JavaScript library for anyone using HTML5, because it provides APIs to test for most of the CSS3 and HTML5 features before you use them, and is intelligent enough to alter semantic markup into 'legacy' 'markup using shims on page-load for old browsers. It also allows you to check what video Codecs are installed for playing video. It also provides media queries and conditional resource-loading (formerly YepNope.js.). Generally, Modernizr gives you the choice of what you do about browsers that don't support the feature that you want. Often, the best choice is graceful degradation, but the resource-loading feature allows you to dynamically load JavaScript Shims to replace the standard API for missing or defective HTML5 functionality, called 'PolyFills'. As the Modernizr site says 'Yes, not only can you use HTML5 today, but you can use it in the past, too!' The evolutionary progress of HTML5 requires a more defensive style of JavaScript programming where the programmer adopts a mindset of fearing the worst ( IE 6) rather than assuming the best, whilst exploiting as many of the new HTML features as possible for the requirements of the site or HTML application. Why would anyone want the distraction of developing their own techniques to do this when Modernizr exists to do this for you? Laila
