Modernizr - Front-end development done right

Drupal integration with the Modernizr JavaScript library. Modernizr allows you to responsibly integrate HTML5 and CSS3 using feature detection, while providing reliable fallback behavior for older browsers.

Installation:

  • Download a Modernizr custom build
  • Copy modernizr-X.Y.min.js to sites/.../modules/modernizr/modernizr.min.js If you have the libraries module installed, use the path sites/.../libraries/modernizr/modernizr.min.js instead.
  • Enable the module

What is Modernizr?

From modernizr.com

Modernizr adds classes to the <html> element which allow you to target specific browser functionality in your stylesheet. You don't actually need to write any Javascript to use it.

Have you ever wanted to do if-statements in your CSS for the availability of cool features like border-radius? Well, with Modernizr you can accomplish just that! The syntax is very intuitive, too:

.multiplebgs div p {
  /* properties for browsers that
     support multiple backgrounds */
}
.no-multiplebgs div p {
  /* optional fallback properties
     for browsers that don't */
}

Modernizr is a small and simple JavaScript library that helps you take advantage of emerging web technologies (CSS3, HTML 5) while still maintaining a fine level of control over older browsers that may not yet support these new technologies.

Modernizr uses feature detection to test the current browser against upcoming features like rgba(), border-radius, CSS Transitions and many more. These are currently being implemented across browsers and with Modernizr you can start using them right now, with an easy way to control the fallbacks for browsers that don’t yet support them.

Additionally, Modernizr creates a self-titled global JavaScript object which contains properties for each feature; if a browser supports it, the property will evaluate true and if not, it will be false.

Lastly, Modernizr also adds support for styling and printing HTML5 elements. This allows you to use more semantic, forward-looking elements such as <section>, <header> and <dialog> without having to worry about them not working in Internet Explorer.

Branch and development information

  • 6.x-1.x: Stable version for 6.x. Supports Modernizr 1.x. The newer versions should work, but there might be some bugs.
  • 6.x-2.x: Backport of the 7.x-2.x branch.
  • 7.x-1.x: Initial version for 7.x. Supports Modernizr 1.x. The newer versions should work, but there might be some bugs.
  • 7.x-2.x: Latest stable version for 7.x. Supports Modernizr 2.x. Has basic support for server side Modernizr. This branch accepts bugfixes only.
  • 7.x-3.x: Active development branch. Supports more features of Modernizr 2.x. The features of this release will be: Modernizr.load(), a Drupal API, and Drush integration. This branch is also accepting new features.

The initial development is sponsored by Pronovix

Project Information

Downloads

Recommended releases

Version Downloads Date Links
7.x-2.1 tar.gz (10.69 KB) | zip (12.43 KB) 2012-Jan-18 Notes
6.x-1.0 tar.gz (6.65 KB) | zip (7.59 KB) 2010-Aug-18 Notes

Other releases

Version Downloads Date Links
7.x-1.0 tar.gz (6.7 KB) | zip (7.63 KB) 2010-Nov-01 Notes

Development releases


Maintainers for Modernizr

  • rupl - 29 commits
    last: 3 days ago, first: 20 weeks ago
  • Yorirou - 41 commits
    last: 3 weeks ago, first: 1 year ago

Issues for Modernizr

To avoid duplicates, please search before submitting a new issue.
All issues
Bug reports
Oldest open issue: 27 Oct 10