Some newly released tools for Visual Studio 2010 including Service Pack 1, the MVC 3 Tools update, and the Web Standards Update introduce the first wave of HTML5 support for ASP.NET development, so that means you can start taking advantage of HTML5's new features in your ASP.NET MVC applications today.
Where to get the new HTML5 goodies.
VS 2010 SP1 now allows you to set HTML5 support as a project-wide setting to include HTML5 validation. SP1 also provides some HTML5 Intellisense for elements and attributes. You can see the complete list of features, bug fixes, and enhancements at KB 983509.
The MVC 3 Tools Update touts support for HTML5 semantic markup, updated jQuery scripts, and includes Modernizr scripts for HTML5 feature detection. You can download the MVC 3 Tools update, as well as view the complete set of documentation at the Tools Update download page.
Though not an official part of Visual Studio 2010, but instead found at the MSDN code gallery, the Web Standards Update adds a great deal of HTML5 element support. Since it's available for download as an extra, you can use it until more features rolled into Visual Studio officially, and get a head start on HTML5.
Validate HTML5 with Visual Studio 2010
After turning on HTML5 validation in Visual Studio, you can test your views to ensure HTML5 compliance. Choose the Tools | Options from the menu to open the VS options dialog then navigate to the Text Editor | HTML | Validation tab.
Setting HTML5 as the target for validation will help you create more robust, HTML5 sites easily, but you still need to stay up to date with the standards to do so.
Make Web Standards a staple in Visual Studio
Of course, since the HTML5 specification isn't complete, no IDE, browser, or any software can claim to support 100% of the HTML5 feature set (or related CSS/API/ECMA) at this time, but that doesn't mean that vendors can't start working on specific feature support now, and continue to do so as new the W3C working groups formalize the specs.
Below is a list of over 30 supported HTML5, CSS, and API features that are now part of Visual Studio via the Web Standards update.
•Video & related tags
•Audio & related tag
•Drag & Drop support
•Accessibility standard WAI-ARIA
•Schema.org & SEO
•Background & Borders
•Basic Box Model
•Flexible Box Layout
HTML5 support in Visual Studio starts with new project templates that take advantage of HTML5 semantic markup.
MVC 3 goes semantic
The MVC 3 Tools Update shows off Visual Studio's semantic side by incorporating semantic markup right into the ASP.NET MVC project templates. When you start a new project in ASP.NET MVC 3, you'll notice a new checkbox asking if you would like to use HTML5 semantic elements.
I'll have some semantic markup, please!
The option to use HTML5 semantic markup enhances the standard MVC project templates in the following ways:
- Modifies the Layout Page to use semantic markup, i.e., <header>, <footer>, and other elements
- Modifies CSS to style semantic markup
The code sample below is from the default layout page, _Layout.cshtml, which demonstrates the use of HTML5 semantic markup.
Of course, HTML support starts with the (finally!) easy to remember <!DOCTYPE> tag. The newly redefined <!DOCTYPE> element supports all HTML up to and including version 5, so you can use it in all your views without worry, regardless of which HTML elements they contain.
The <header>, <nav>, <footer>, and <section> elements replace the previous structural <div> elements of the page, as semantic markup in the page now defines the structure and page layout instead. You'll find new CSS styling for these semantic elements in the default CSS file for the project.
MVC 3 <3's CSS3
Visual Studio project templates now include styling for HTML5 semantic markup in the \Content\Site.css file. Both HTML5 and standard markup styling are present in the CSS file, to work nicely with pages that might still use <div> tags for page structure/layout. Specific CSS selector prefixes such as -moz and -webkit target all major browsers as well, making cross browser compatibility a cinch.
Below is a snippet from the Site.css file showing both semantic structure and styling as well as some new CSS features like the border-radius. The code at the bottom of the following sample also demonstrates cross browser CSS by using -moz and -webkit prefixes.
More modern MVC 3 development with Modernizr.
- modernizr-1.7.js - Standard library for development
- modernizr-1.7.min.js - Minimized library for production
You don't even need to reference the Modernizr library, as Visual Studio has done this for you in the project's _Layout.cshtml, as shown here.
However, the minified script file size is 10k, and you can trim it down by asking Modernizr to give you files that contain only the code for the features you want to detect at the Modernizr Downloads page. Using this tool, you can trim down the size to a few bytes of data, so it's a huge benefit for the performance of a production application.
Detecting features with Modernizr takes little programming effort:
There's just no easier way to do feature detection! Just query the HTML5, CSS3, or other feature you're looking for by accessing it as a property on the Modernizr object. And that's it! Modernizr takes care of all the fuss with feature detection and has boiled it down to a simple if/else statement. If you're interested in the details of just how Modernizr does this, see the Modernizr docs.
There's no longer any excuse not to start working with these new HTML5 features! There's lots of new Visual Studio components as well as MSDN Gallery downloads that can help you HTML5ify your sites, today.