Modernizr - Frontend development done right

Respond to your user’s browser features.

Modernizr tells you what HTML, CSS and JavaScript features the user’s browser has to offer. It makes the results available to you in two ways: as properties on a global Modernizr object, and as optional 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 the file it generates into sites/all/libraries/modernizr/modernizr-custom.js
  • Enable the module

If you use Drush, the module will automatically download a development version for you when you enable the module. However, it will be a Modernizr v2, and you should be creating a custom build using our config panel which will give you a Modernizr v3 custom build. The download command has been deprecated as of 7.x-3.8

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 hundreds of feature tests. This module optionally includes the old version of yepnope.js for conditional loading of external .js and .css resources.

Note: yepnope.js has been deprecated from Modernizr v3 and will not be present in Modernizr Drupal module 7.x-4.x. We have implemented a fix to restore functionality for people using 7.x-3.7 with the latest Modernizr v3 builds.

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. Supports Modernizr v3. Supports Modernizr.load(), drush, and provides an API to other modules to keep your build up to date.
  • 7.x-2.x: Supports Modernizr 2.x. Has basic support for server side Modernizr. This branch accepts bugfixes only.

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

Releases