Modernizr - Frontend development done right

Modernizr tests which native CSS3 and HTML5 features are available in each browser and makes the results available to you in two ways: as properties on a global Modernizr object, and as classes on the <html> element. This information allows you to progressively enhance your pages with a granular level of control over the experience.

This Drupal module provides deep integration with the Modernizr JS library, allowing other modules or themes to register tests, load additional assets as needed, and even create new copies of the Modernizr library when a website's requirements change. Read more below.

Installation:

  • Download a Modernizr custom build
  • Copy modernizr-X.Y.min.js to sites/all/libraries/modernizr/modernizr.min.js
  • Enable the module

If you use Drush, the module will automatically download a development version for you when you enable the module.

Why use Modernizr?

Taking advantage of cool new web technologies is great fun until you have to support browsers that lag behind. Modernizr makes it easy for you to write conditional JavaScript and CSS to handle each situation, whether a browser supports a feature or not. It’s perfect for doing progressive enhancement easily.

How it works

Modernizr runs quickly on page load to detect features — it does not add or subtract any functionality from any browser. After running the tests it creates a JavaScript object with the results, and adds classes to the <html> element for you to use within your CSS. Modernizr supports dozens of tests, and optionally includes yepnope.js for conditional loading of external .js and .css resources. Note: yepnope.js has been deprecated and will not be present in Modernizr Drupal module 7.x-4.x.

Check out the full list of features that Modernizr detects, or learn more about conditional resource loading with Modernizr.

Branch and development information

  • 7.x-3.x: Latest stable release. Active development branch. Supports Modernizr.load(), drush, and provides an API to other modules.
  • 7.x-2.x: Supports Modernizr 2.x. Has basic support for server side Modernizr. This branch accepts bugfixes only.
  • 6.x-1.x: Stable version for 6.x. Supports Modernizr 1.x. The newer versions should work, but there might be some bugs.

This module is made possible by the work of these ❤ amazing developers

Supporting organizations: 
sponsored a significant portion of the contribution time. Paid for maintainer's cost to promote module at multiple Drupal events.
sponsored initial development of module.

Project Information

Downloads