It detects the availability of native implementations for next-generation web technologies, i.e. features that stem from the HTML5 and CSS3 specifications. Many of these features are already implemented in at least one major browser (most of them in two or more), and what Modernizr does is, very simply, tell you whether the current browser has this feature natively implemented or not.
Once you do the feature detection for your browser, you can then do polyfill.
And by using
Why Feature Detection
Let’s start with the idea that all browsers are not created equal. As browser vendors raced to become dominant, most implemented the features that were in high demand, even if they weren’t yet standardized. So features and implementations differ between browsers. For those professionally developing Web pages, this is a fact of life.
There are problems with this approach, it bundles multiple assumptions about the features the browser supports in one check. A single wrong assumption can break the site. And even if it works with today’s version of a browser, the next release might not require—or worse, might remove support altogether.
A far better approach to handling differences among Web browsers is to use feature detection.
There are two very important recommendations to keep in mind when using feature detection:
- Always test for standards first because browsers often support the newer standard as well as the legacy workaround.
- Always target only related features in a single check, effectively minimizing assumptions of a browser’s capabilities.
The name Modernizr comes from the team goal of modernizing our development practices.
Modernizr has built-in detection for most HTML5 and CSS3 features that’s very easy to use in your code. It’s very widely adopted and constantly enhanced.
Here’s an example of Modernizr detecting whether your browser supports fontface.
About Shims, Polyfills
The difference between shims and polyfills is that shims only mimic a feature and each has its own proprietary API, while polyfills emulate both the HTML5 feature itself and its exact API.
- Web Storage
- HTML5 Sectioning
- Web Forms
- Web Sockets
- Browser State Management
- File API/Drag and Drop
- Cross-Origin Resource Sharing (CORS)
- CSS Selectors, Transforms, Styles, Media Queries
- Media Capture
- and much more
There’s a lot that you can do with
Modernizr.load. It was released standalone as yepnope.js but it was made specifically with Modernizr and feature-testing in mind. For the complete docs for
Modernizr.load, see yepnopejs.com.
yepnope is an asynchronous conditional resource loader that’s super-fast, and allows you to load only the scripts that your users need.
So yepnope function call maps to the same call as Modernizr.load.
Here’s a sample of what the load syntax looks like:
So a simple example could be:
load function is the core of yepnope.js. The recommended type for resources is an array of test objects. The consistency helps make your code look better and stay maintainable.
However, if you don’t need more than one test group, as in the previous example, then you can avoid putting it in an array, and just send in the object.
In my example that I am building for my canvas drawing, I use the following code:
- First to load Modernizr (use the one with minin the filename).
- And then to load jQuery and test for whether the browser supports canvas. If it does not, I load the excanvas pollyfill.
Getting Started with Modernizr
Where to Get Modernizr
- From GitHub: https://github.com/Modernizr/Modernizr
- From Modernizr: http://modernizr.com/
- Already part of your ASP.NET MVC 3 & 4 projects. For more information, see HTML5 Improvements with the ASP.NET MVC 3 Tools Update.
- Add it to your Visual Studio project using Manage NuGet projects.
You can download the latest version of Modernizr from within your project in Visual Studio. Right click the project, click Manage NuGet projects.
You will want the full version to use YepNope. (Modernizr listed first in by the NuGet does not include yepnope.)
Or you can download Modernizr from GitHub.
Add Modernizr to your Web page
Next, insert Modernizr script into the head of your Web page.
Next, you can get your polyfills from GitHub.
And use Modernizr.load to test to do the right thing for your browser.
The Modernizr documentation is excellent with code examples and explanation of features.
And if you are not testing every part of HTML5, you can customize Modernizr to select only the tests you need. So you need to test only for canvas, go to http://modernizr.com/download/ to create a customized version of Modernizr that tests only what you need.
How Modenizr Works
Once you’ve add a script reference to Modernizr in a page it’ll go to work for you immediately. In fact, by adding the script several different CSS classes will be added to the page’s <html> element at runtime. These classes define what features the browser supports and what features it doesn’t support. Features that aren’t supported get a class name of “no-FeatureName”, for example “no-flexbox”.
Features that are supported get a CSS class name based on the feature such as “canvas” or “websockets”.
In IE9, Modernizr will return this code in your html tag:
<html class=" js no-flexbox canvas canvastext no-webgl no-touch geolocation postmessage no-websqldatabase no-indexeddb hashchange no-history draganddrop no-websockets rgba hsla multiplebgs backgroundsize no-borderimage borderradius boxshadow no-textshadow opacity no-cssanimations no-csscolumns no-cssgradients no-cssreflections csstransforms no-csstransforms3d no-csstransitions fontface generatedcontent video audio localstorage sessionstorage no-webworkers no-applicationcache svg inlinesvg smil svgclippaths">
Modernizr with CSS
You can use the CSS classes added to the <html> element directly in your CSS files to determine what style properties to use based upon the features supported by a given browser.
For example, the following CSS can be used to render a box shadow for browsers that support that feature and a simple border for browsers that don’t support the feature:
More Information on Modernizr, Polyfills
For more information, see:
- Modernizr documentation.
- HTML5 Cross Browser Polyfills on GitHub
- Dan Wahlin’s blog post Detecting HTML5/CSS3 Features using Modernizr on asp.net.
- Brandon Satrom’s article in MSDN Magazine, No Browser Left Behind: An HTML5 Adoption Strategy.
- Sascha COrti’s MSDN Magazine article, Browser and Feature Detection.
- Project Silk: Client-Side Web Development for Modern Browsers
- Detect HTML5 & CSS 3 features in your ASP.NET Web Forms, MVC, or Razor Pages with Modernizr
If you want to to support the scale feature of CSS3 2d transforms using feature detection and progressive enhancement, see Using Modernizr to support the Scale CSS3 2d transform in older versions of IE.
- Also check out Learn how to use Modernizr from the ASP.NET MVC3 Tools Update to store user data via HTML5 localStorage. I adapt the article from being in ASP.NET MVC3 to plain ole HTML.
Sample code is available in the DevDays GitHub repository. See https://github.com/devdays/html5-tutorials