Be progressive with Modernizr and ASP.NET 4.5

Takeaway: Rolling out applications that use HTML5 and CSS3 requires planning and some help via JavaScript. Here’s how Modernizer integrates with ASP.NET 4.5 and Visual Studio 2012.

The Microsoft Web platform ASP.NET 4.5 embraces the latest standards, most notably HTML5 andCSS3. The trap of using new standards and features is all of the older browsers that do not support the latest and greatest, so you must develop with progressive enhancement in mind. The goal of progressive enhancement is to deliver the best experience to the widest possible audience regardless of the browser.

The Modernizr open source JavaScript library provides one part of achieving this goal by making it easy to decide if a feature can be used. Let’s look at Modernizer’s integration with ASP.NET 4.5 and Visual Studio 2012, while paying close attention to how this integration works via new ASP.NET 4.5 features.

A package deal

Along with jQuery and Knockout.js, Modernizr is included with Visual Studio 2012; in addition, it can be installed via NuGet. Figure A shows how to install the package via NuGet in Visual Studio Ultimate 2012. Once installed, you can add it to projects via the Manage button shown in Figure B. Just for laughs, Figure C shows it displayed in a Code Map for a simple ASP.NET Web application. Any updates to the Modernizr library will be available via the Updates area of the package manager interface shown in Figure A. You can always use the NuGet console interface as well. Modernizr was included in my Visual Studio Ultimate 2012 install and is part of every Web application I create in the IDE.

Figure A

Modernizr JavaScript library managed via NuGet Package Manager (Click the image to enlarge.)

Figure B

The Manage button allows you to add/remove Modernizr to/from your projects. (Click the image to enlarge.)

Figure C

Viewing Modernizr package within project package structure via Code Map (Click the image to enlarge.)

NuGet adds a packages.config file to your application, which it uses to track packages and their versions. You will find the file in the base directory of a Web application created in Visual Studio 2012. As an example, the following listing provides a portion of the packages.config file for my sample project.

<?xml version="1.0" encoding="utf-8"?>
<packages>
<package id="AspNet.ScriptManager.jQuery" version="1.8.2" targetFramework="net45" />
<package id="EntityFramework" version="5.0.0" targetFramework="net45" />
<package id="jQuery" version="1.8.2" targetFramework="net45" />
<package id="jQuery.UI.Combined" version="1.9.2" targetFramework="net45" />
<package id="Modernizr" version="2.6.2" targetFramework="net45" />
</packages>

Each package element has an id, version, and the .NET Framework in which it targets.

Using it in an ASP.NET Web application

Once Modernizr has been added to your Web application, the library file is placed in the Scripts directory as shown in Figure D. Also, the library has been opened in the IDE to view its source.

Figure D

The location of the Modernizr library files within a project. (Click the image to enlarge.)

The library is also a standard feature of the Web application as Figure E shows. It it is included in the site via the Site.master template file using the following code block.

<asp:PlaceHolder runat="server">
<%: Scripts.Render("~/bundles/modernizr") %>
</asp:PlaceHolder>

Figure E

The Modernizr feature within Web applications. (Click the image to enlarge.)

This is where it can be a little confusing, or maybe it’s just me. Bundling is a new feature added with ASP.NET 4.5 that it is delivered via System.Web.Optimization. Basically, it (along with minification) allows you to bundle multiple CSS and JavaScript files into one bundle, thus reducing the number and size of HTTP requests the application makes to the Web server. Bundles are created in BundleConfig.cs files (RegisterBundles is the main method), which are located in the App_Code directory of an ASP.NET 4.5 website created in Visual Studio 2012. The Add method of the BundlesCollection provides the vehicle for creating bundles, so you can add your own as necessary. Here is a sampling of the BundleConfig.cs file created for my simple project.

public static void RegisterBundles(BundleCollection bundles)   {
bundles.Add(new ScriptBundle("~/bundles/WebFormsJs").Include(
"~/Scripts/WebForms/WebForms.js",
"~/Scripts/WebForms/WebUIValidation.js",
"~/Scripts/WebForms/MenuStandards.js",
"~/Scripts/WebForms/Focus.js",
"~/Scripts/WebForms/GridView.js",
"~/Scripts/WebForms/DetailsView.js",
"~/Scripts/WebForms/TreeView.js",
"~/Scripts/WebForms/WebParts.js"));
bundles.Add(new ScriptBundle("~/bundles/modernizr").Include("~/Scripts/modernizr-*"));    }

Modernizr is added to the bundle in the final line. The bundle name (/bundles/modernizr) points to all files beginning with ‘modernizr-‘ in the scripts directory of the Web application. With that said, the previously mentioned Scripts.Render line makes more sense, as it brings the necessary files into each page that uses Site.master as a template. For CSS files, the Styles.Render method is used. In addition to the code approach just described (using C# file), the Bundle.config XML file in the application’s base directory allows you to create bundles as well. The code option allow the system to do more dynamic things, with debugging being a big one, while the XML configuration file is more static.

The crux of this library is the creation of a Modernizr JavaScript object that contains test results. It will test more than 40 next-generation features. It adds classes to the html element to explain what is not supported and provides features for backward compatibility with older browsers. The basic approach to these tests is using the load method of the Modernizr object. Basically, you tell it what to test and then what script(s) to load if the test passes (yep) or fails (nope). The following snippet determines if the browser supports the HTML5 Canvas feature.

Modernizr.load({
test: Modernizr.canvas,
yep : 'CanvasSupport.js',
nope: 'NonCanvas.js'
});

The current list of supported browsers includes IE6+, Firefox 3.5+, Opera 9.6+, Safari 2+, and Chrome. The iOS’s mobile Safari, Android’s WebKit browser, Opera Mobile, Firefox Mobile, and BlackBerry 6+ are the mobile platforms supported. Visit the Modernizer site for more information on putting the library to work in your next project.

Give them only what they can use

The Modernizr library provides a straightforward way to build applications that use the latest Web standards/features when possible (i.e., browsers/clients that support it) while hopefully not negatively impacting the experience of users who cannot use the new features. Microsoft has embraced this library while making it a standard option for ASP.NET 4.5 Web applications created with Visual Studio 2012, and making it easily available via NuGet.

If you’re interested in Modernizr on the server, check out this GitHub project.