Browser

Modernizr JavaScript library ushers in next-gen web design

Ryan Boudreaux introduces you to the Modernizr open source JavaScript library, which provides scripts to backfill functionality in older browsers while taking advantage of the latest CSS3 and HTML5 coding.

Modernizr is the open source JavaScript library that helps web developers build the next generation of web design utilizing the power of HTML5 and CSS3. Manual feature detection is not necessary anymore because Modernizr solves the issue of having to ask the browser if it can perform certain tasks, especially with reference to new properties in HTML5 and CSS3 coding. The Modernizr library makes it easy for web developers to add support to their pages for varying levels of user experiences based on the browser detected.

Supported browsers include: IE6+, Firefox 3.5+, Opera 9.6+, Safari 2+, and Chrome. On mobile, it supports iOS's mobile Safari, Android's WebKit browser, Opera Mobile, and Firefox Mobile, but there is still more testing to be done with respect to support for Blackberry 6+.

The name Modernizr is actually derived from the goal of modernizing development practices and the collective team of developers. In this vein, Modernizr pairs extremely well with scripts that provide support for native browsers when support for certain properties is lacking. In general, these scripts are called polyfills, also called a shim or a shiv containing JavaScript that replicates the standard API for unsupported browsers.

Many web site implementations employ user agent sniffing methods for detecting a user's browser with tools such as the configurable navigator.userAgent property. Modernizr uses feature detection that is a more reliable method of establishing what the browser can and cannot do:

  • Tests for over 40 HTML5 and CSS3 features in a matter of seconds
  • Creates a JavaScript object that contains the results of these tests as boolean properties
  • Adds classes to the html element that explain precisely what features are and are not natively supported
  • Provides a script loader so you can pull in polyfills to backfill functionality in old browsers

To install the Modernizr, you can create a custom set of features for your own use, specialized to fit your needs, and this helps keep the code to a minimum. Once on the download page, you select which features you want to use for your project; they include selections from CSS3, HTML5, and others. Or, you can use a developer build that includes an uncompressed version of all the features. This allows you to learn about the features, and then when ready for production, you can utilize the download tool to pick and build only the ones you select. A screen capture of the feature selector download page is shown below.

Once you have the script set up and downloaded, you then add the script tags within the <head> of your HTML documents. And for best performance, it is recommended that the script follow after the stylesheet references for two reasons: the HTML5 Shiv (that enables HTML5 elements in IE) must execute before the <body>, and if you're using any of the CSS classes that Modernizr adds, you'll want to prevent any flash of unstyled content.

Probably one of the best features about using Modernizr is that there is a polyfill for just about every HTML5 property that it recognizes, which means that you can develop for the future with HTML5 and CSS3 elements and be able to ensure replication in non-supporting browsers.

There is much more to Modernizer than can be conveyed in this quick review of the amazing tool, but this will get you started on the right track for enabling your web documents for now and into the future of HTML5 and CSS3 web development.

Other resources

About

Ryan has performed in a broad range of technology support roles for electric-generation utilities, including nuclear power plants, and for the telecommunications industry. He has worked in web development for the restaurant industry and the Federal g...

0 comments