InfoQ

InfoQ

InfoQ

En | 中文 | 日本語 | Br

592,113 Apr unique visitors

News

My Bookmarks

Login or Register to enable bookmarks for unlimited time.

The content has been bookmarked!

There was an error bookmarking this content! Please retry.

Safely use HTML 5 and CSS 3 Today with Modernizr

Posted by Jonathan Allen on Jun 08, 2011

Sections
Development
Topics
HTML5 ,
HTML ,
Ruby ,
Javascript ,
Rich Internet Apps ,
CSS ,
Java ,
Dynamic Languages ,
Markup Languages ,
Web Development ,
Languages ,
.NET ,
Programming

The principal problem with using HTML 5 and CSS 3 isn’t the adoption rate or the differences between browsers, it is knowing what those differences are in the first place. Once that is known developers can work around the limitations using graceful degradation techniques. To help figure that out many turn to the open source project Modernizr.

Rather than look at user-agent strings, Modernizr uses a series of tests to determine the capabilities of a browser. In a few milliseconds it can perform over 40 tests and record their results as properties on an object called Modernizr. Using this information developers can detect if a feature they are using isn’t supported and react accordingly.

New in version 2, Modernizr now comes with a conditional resource loader for JavaScript and CSS. This resource loader takes three arguments, the first being an expression listing the features that are required. The second argument is the list of JavaScript and CSS files to be loaded if the expression returns true. The third argument is the fallback files to use if the necessary features are not present.

In addition to graceful degradation, the loader can be used to bring in a polyfill. For those of you who are not familiar with the term, a pollyfill is “a JavaScript shim that replicates the standard API for older browsers”. While not always recommended, pollyfills can be used to add support for the vast majority of HTML 5 features that Modernizr detects.

In order to improve performance, Modernizr can be customized to only perform the tests that are needed by the site. This is done via the Modernizr download page, which also services as a list of detectable features. There is a separate list of undetectable features and possible workarounds on their github site.

  • This article is part of a featured topic series on Java

Related Sponsor

VMware vFabric SQLFire - Test drive the data management system with memory speed, horizontal scalability and a familiar SQL interface

2 comments

Watch Thread Reply

Beware of polyfills and JS shims by Flinn Mueller Posted
Re: Beware of polyfills and JS shims by Wanderson Santos Posted
Sort by date descending

  1. Back to top

    Beware of polyfills and JS shims

    by Flinn Mueller

    These kinds of techniques never work as advertised and almost always introduce performance issues. This isn't a proper solution for supporting browsers.

    Reply

  2. Back to top

    Re: Beware of polyfills and JS shims

    by Wanderson Santos

    @Flinn Mueller Please, show us your solution!

    Reply