Javascript – Why Use Modernizr?

• What is Modernizr?
• Why use Modernizr?

What is Modernizr?

As per the Modernizr website, Modernizr is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser. When I first read this punchline, I could not really figure out as to what is the purpose of this library, or simply speaking, what are some of the important use-cases given that Modernizr helps detect browsers support for HTML5/CSS3 features. After some digging and reading several webpages, I fugured out that one may want to use Modernizr because it helps web developer to plan ahead during design time on how to deal with specific UI features that may find conditional support with different browsers. In simple words, what needs to be done to not surprise end users with inconsistent experience if the browser he is using to access the UI does not support the some of the features.
Following are some good pages on Modernizr:

• Taking Advantage of HTML5 and CSS3 with Modernizr
• How to use Modernizr
• Using Modernizr to detect HTML5 features and provide fallbacks

Why use Modernizr?

Following are some of the reasons why one would want to use Modernizr:

• Features’ Detection: Modernizr is very useful for detecting CSS3/HTML5 features support across different browsers which eventually helps web developers to plan on handling the features support with conditional CSS/JS code. Mind you that Modernizr just helps you to detect the browser-specific features support. You would still need to write the code for handling the features support. In past, I have often come across web developers not planning enough in design phase on how to support certain UI features that may not be supported across all the browsers. Often, it was caught during testing phase and developers have to do tweaks to fix the issues for feature to work consistently across the browsers. With advent of JQuery UI widgets, much of it got taken care by JQuery library and web developers life was made comfortable. However, with advent of HTML5/CSS3 features, and the fact that not everyone uses JQuery for everything, there arose a need on how to have consistent look and feel across different browsers while making use of HTML5/CSS3 features. This is where Modernizr helps. It helps you to write one or more rules and Modernizr makes it happen across multiple browsers with different versions.
• Design early in the game: With Modernizr, one could easily put some thought around designing UI elements early in the game and plan to write appropriate/conditional CSS/JS code blocks for consistent & .
• Greater traceability: The usage of Modernizr helps developers to have traceability of CSS/JS code blocks to support specific features based on browser support
• Easy to Debug & Fix: With Modernizr, it makes it easier for developers to debug in case of inconsistencies seen on browser and fix it appropriately.