Modernizr Library in MVC 4

All of us web developers have the responsibility to maintain the look and feel of web applications the same for all users and browsers. One challenge is that there are still many older browsers out there like IE6 that don't allow us to style web apps using HTML5 and CSS3 and this will persist for years and years, in other words we must deal with backward compatibility issues for all the applications that targets the general public. A semantic HTML5 site looks beautiful in a modern browser but might end up looking broken in older browsers. Fortunately we have "Modernizr" that provides a work-around.

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

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



If you don't find this library in your application, download it from NuGet or the Microsoft CDN website.



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



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



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



Again, run the application in older browsers that do not support HTML5 and CSS3, you will experience the 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 an 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.