Modernizr Library in MVC 4

In this post you will learn how developers take the advantage of Modernizr in MVC 4 Applications.

We all web developers have the responsibility to maintain the look and feel of web applications same for all users and browsers. One challenge is that there are still a lot of older browsers out there like IE6 which don't allow us to style web apps using HTML5 and CSS3 and this will stick around us for years and years which means we have to deal with backward compatibility issues for all the applications that targets general public. The semantic HTML5 site looks beautiful in a modern browser but might end up looking broken in old browsers so we have “Modernizr” that enables us to work around.

Modernizr is a small, simple and open-source JavaScript library that helps us to take advantage of emerging web technologies HTML5, CSS3 by maintaining look and feel on older browsers that may not yet support these new technologies.

If you create ASP.NET MVC 4 Web Application, you get this library by default and by expanding ‘Scripts’ folder you can see it.

If you don’t find this library in your application; download it from NuGet or Microsoft CDN website.

Once you have the Modernizr Libraries in your application, add it or include it in the bundling (App_Start > BundleConfig.cs).

And then render it on layout page (Views > Shared > _Layout.cshtml).

Now, run the application in modern browsers that supports HTML5 and CSS3, you will see following output even without using Modernizr Libraries:

Again, run the application in older browsers that does not support HTML5 and CSS3, you will experience same look and feel (I’m using IE6 here):

Now, remove the Modernizr reference on _Layout.cshtml page:

And now, again run the application and look at the output in IE6.

If we had not included Modernizr on the page, visitors of the site using older browsers would have instead seen something broken like above. As you can see Modernizr provides a really big improvement over what users with older browser would have otherwise seen.  Best of all, we didn’t have to write any code or author an alternative CSS style-sheet to get this to work.  And we are using HTML5 Semantic Markup throughout the site.

Hope this helps.