HTML5 Improvements with the ASP.NET MVC 3 Tools Update

Last week I blogged about the new ASP.NET MVC 3 Tools Update, and then followed it up with a detailed post that covered using the EF Code First and the new Data Scaffolding features in it.

Today’s blog post is a continuation of this series and covers some of the new HTML5 improvements with the ASP.NET MVC 3 Tools Update release.

Project Template Support for HTML5 Semantic Markup

The ASP.NET MVC 3 Tools Update adds support for you to optionally use HTML5 semantic markup when creating new ASP.NET MVC 3 projects.  You can specify this by checking the “Use HTML5 semantic markup” checkbox when creating new projects:

SNAGHTML10f01f0d

Selecting this checkbox option does two things:

1) It causes VS 2010 to use HTML5 semantic markup elements like <header>, <footer>, <section> and <nav> within the default layout.cshtml file that is generated.  This is instead of just using <div> elements for header/footer/navigation elements – which is the default behavior if the HTML5 semantic checkbox isn’t selected (and the same behavior that we have shipped earlier).

2) It causes VS 2010 to reference the modernizr.js JavaScript library by default within the layout.cshtml – which among other things will allow you to use CSS to style HTML5 semantic markup elements even with older browsers like IE6 (ensuring your site still works for older browsers).

Understanding Semantic HTML5 Markup

HTML5 introduces a number of new elements and APIs that introduce new behavioral capability (features like <video>, <canvas>, <svg>, etc). 

HTML5 also introduces new elements (like <section>, <article>, <aside>, <header>, and <nav>) that enable you to enrich the semantic meaning and structure of your content and pages.  These features allow you to write your pages so that you don’t have to use opaque <div> elements to structure everything, and instead they allow you to better express the semantic meaning of your content.  This makes your code a little cleaner to read, and long-term will hopefully enable browsers and search engines to better understand your markup and provide even richer experiences.

When you create a new ASP.NET MVC 3 Project with the “Use HTML5 semantic markup” checkbox selected, Visual Studio will use semantic HTML instead of <div> elements (where appropriate) within the layout.cshtml file that is generated for the new project.  This means that the top of the site is wrapped in a <header> element, navigation links are surrounded by a <nav> element, and the footer is encapsulated within a <footer> element.

Learn more about Semantic HTML5 Markup

Bruce Lawson and Remy Sharp have a great Introducing HTML5 book that covers (among other new HTML5 features) how you can take advantage of semantic HTML5 markup:

image

You can also read Emily Lewis’ Using HTML5’s New Semantic Tags Today article on MSDN’s ScriptJunkie site to learn more about the role of HTML5 semantic markup and see a practical example of it in action.

HTML5 Intellisense within VS 2010 SP1

With VS 2010 SP1, you can now change the “Target Schema for Validation” drop-down within the Text Editor toolbar to target HTML5 with intellisense:

image

When you select HTML5 as your validation target, the HTML intellisense engine within Visual Studio will provide appropriate intellisense for the new HTML5 elements and attributes.  This is true for both behavioral elements like <canvas> and <video> as well as semantic elements like <article> and <nav>:

SNAGHTML1115b0b2

Note: the next release of VS will default to honoring the <!DOCTYPE> at the top of the page when driving intellisense, and then allow you to specify a default standard to use when it isn’t present (or when you are editing within user controls, or partial/editor templates).  With VS 2010 and earlier versions of Visual Studio you have to explicitly set which HTML version you want to target.

Modernizr.js Library

Semantic HTML5 markup is now supported by all modern browser vendors, and you can use standard CSS techniques to stylize and customize pages built with it.

One challenge, though, is that there are still a lot of older browsers out there – and browsers like IE6 by default don’t allow you to stylize semantic HTML5 elements using CSS.  The semantic HTML5 site that looks beautiful in a modern browser might end up looking broken unless you use a library that enables you to work around this limitation.

Modernizr.js

Modernizr is a small and elegant open-source JavaScript library that helps you take advantage of emerging web technologies (HTML5, CSS3) while still maintaining a level of compatibility with older browsers that may not yet support these new capabilities.  You can learn more about Modernizr from the http://modernizr.com/ website.

Starting with the ASP.NET MVC 3 Tools Update, we are now shipping Modernizr with ASP.NET MVC 3, and adding it by default to all new ASP.NET MVC 3 projects.  If you select the “Use HTML5 semantic markup” checkbox when creating new ASP.NET MVC 3 projects, Visual Studio will also add a reference to the Modernizr.js library by default within your layout.cshtml template:

image

Modernizr.js and using CSS with Semantic HTML5 on older Browsers

Including the above Modernizr.js script reference will enable you to use CSS to stylize semantic HTML5 elements – and have it work both in modern browsers (where it is natively supported), as well as older ones (including IE6).  Among other things, Modernizr is smart enough to run a little script that will cause older browsers to honor CSS rules with unknown elements they encounter.

You can see the benefit Modernizr brings with this by running the default ASP.NET MVC 3 project that is created using IE9.  If you use the default IE9 rendering mode (which supports Semantic HTML5 elements) the site will look like below, and use the browser’s built-in CSS support for semantic HTML5:

SNAGHTML112b7c79

If you enable “Compatibility View” within the browser (the second icon at the top of IE’s navigation bar) – you’ll see a “downlevel” rendering of the page (just like what IE6/7/8 users would see).  Modernizr allows our CSS rules to work in this downlevel mode – despite the older IE rendering engine not natively supporting elements like <header>, <footer>, <nav>, <section>, etc:

SNAGHTML112e4acf

If we had not included Modernizr.js on the page, visitors to the site using older browsers would have instead seen something broken like this:

SNAGHTML1130d736

As you can see – Modernizr provides a 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.

Using Modernizr to Detect Browser Capabilities

The above Semantic HTML5 markup example is just one of the nice benefits that Modernizr brings. 

Modernizr also makes it easy to check for browser capabilities (without you having to hard-code browser versions into code), and enables you to easily detect and light-up if a specific feature is supported.  You can learn more about how this works on the http://modernizr.com web-site. 

Justin Schwartzenberger has a nice blog post that shows this in action, and highlights How to use Modernizr with ASP.NET MVC 3 to store user data via HTML5 localstorage.  His tutorial shows an end-to-end ASP.NET MVC 3 sample where he uses HTML5’s localstorage feature if it is available, and falls back to just using cookies on older browsers. 

Summary

The new ASP.NET MVC 3 Tooling Update is full of goodness.  If you haven’t already downloaded and installed it I highly recommend you do so.  You can run the ASP.NET MVC 3 installer on the http://asp.net/mvc site to make sure you have the latest version.

The HTML5 Semantic Markup improvements in ASP.NET MVC 3 enable you to start designing sites that take better advantage of HTML5 and modern browsers.  Using Modernizr.js you can also have these sites continue to work with older browsers, and optionally light-up only when new features are enabled.

Hope this helps,

Scott

P.S. I am also now using Twitter for quick updates and to share links. Follow me at: twitter.com/scottgu

Published Monday, May 9, 2011 7:54 PM by ScottGu
Filed under: , , ,

Comments

# re: HTML5 Improvements with the ASP.NET MVC 3 Tools Update

Monday, May 9, 2011 11:35 PM by Stuart

Will we ever get HTML5 support in WebForms rather than just in MVC? We were assured that both frameworks were going to be equally supported going forward, but I haven't seen any "HTML5 in WebForms" blog posts.

I'm thinking in particular about whether it will ever be straightforward to get <asp:TextBox> to render as <input type="email">, etc...

(forgive me if I've missed this somewhere and it's been broadcast somewhere that it's already supported...)

# re: HTML5 Improvements with the ASP.NET MVC 3 Tools Update

Tuesday, May 10, 2011 1:55 AM by Kazi Manzur Rashid

There are still few more issues in the html5 intellisense in VS, for example, it is no longer required to specify the type when including css and js files, yet it complains for the missing type attribute.

Is there any place where I can log these issues?

# re: HTML5 Improvements with the ASP.NET MVC 3 Tools Update

Tuesday, May 10, 2011 2:09 AM by ScottGu

@Stuart,

>>>>>>> Will we ever get HTML5 support in WebForms rather than just in MVC? We were assured that both frameworks were going to be equally supported going forward, but I haven't seen any "HTML5 in WebForms" blog posts.

We definitely have some good stuff coming with the next release of WebForms.  Some of these features include some cool new HTML5 support.  We'll be talking about these much more broadly in the months ahead.

Hope this helps,

Scott

# re: HTML5 Improvements with the ASP.NET MVC 3 Tools Update

Tuesday, May 10, 2011 2:10 AM by ScottGu

@CanvasGuy,

>>>>>> Can you write a blog post (or get someone to do it) that explains how to manipulate a html5 canvas in MVC 3? This will be very useful because canvas manipulations happens only through javascript (as far as I know) and passing model data to into js is something that I was struggling with for a little while.

Is there a particular scenario you are interested in?  One approach you can use is to have MVC return a JSON based payload of the data you need to render something into a Canvas.  Is that what you had in mind?

Thanks,

Scott

# re: HTML5 Improvements with the ASP.NET MVC 3 Tools Update

Tuesday, May 10, 2011 2:11 AM by ScottGu

@Kazi,

>>>>>> There are still few more issues in the html5 intellisense in VS, for example, it is no longer required to specify the type when including css and js files, yet it complains for the missing type attribute. Is there any place where I can log these issues

Can you send me email (scottgu@microsoft.com) with details of the issues?  I can then connect you with the right person to follow up on them.

Thanks!

Scott

# re: HTML5 Improvements with the ASP.NET MVC 3 Tools Update

Tuesday, May 10, 2011 3:00 AM by Mike

Please open up these templates to the community and stop making opinionated templates yourself.

# re: HTML5 Improvements with the ASP.NET MVC 3 Tools Update

Tuesday, May 10, 2011 9:14 AM by Erwin Werkman

Looks interesting. Pity I am still working in Webforms, and I don't see many improvements there...

# re: HTML5 Improvements with the ASP.NET MVC 3 Tools Update

Tuesday, May 10, 2011 3:01 PM by haacked

@Mike you can create your own project templates. I'm working on a blog post that will show you how to do it soon.

# re: HTML5 Improvements with the ASP.NET MVC 3 Tools Update

Tuesday, May 10, 2011 9:59 PM by Goran Gligorin

I noticed that CSS3 is still not included in the Style Sheet Toolbar. Any specific reason for that?

# re: HTML5 Improvements with the ASP.NET MVC 3 Tools Update

Wednesday, May 11, 2011 2:15 AM by Michael

Great work, your really on the ball with the web stuff these days.

# re: HTML5 Improvements with the ASP.NET MVC 3 Tools Update

Wednesday, May 11, 2011 9:37 AM by jcapka

Great work. I seem to get an error with Modernizr however, and since it breaks execution every time I reload a page in debug mode, it becomes very annoying very quickly. I get this behaviour in a vanilla MVC3 Razor HTML5 site. The error is:

Microsoft JScript runtime error: Not implemented

and it happens at this code in Modernizr

c.ogg=a.canPlayType('video/ogg; codecs="theora"')

Until this doesn't break every time I load a page, I can't really see the addition of Modernizr as being very useful. Hope there is a way to get around this. Any ideas are welcome, Thanks!

# re: HTML5 Improvements with the ASP.NET MVC 3 Tools Update

Thursday, May 12, 2011 5:36 AM by Daniel Steigerwald

ad HTML5: It's very nice to see Microsoft finally perceive real word, but.. 'missing type attribute' warning made me turn off all shiny new HTML5 validation immediately. And it will probably take couple of years to fix this simple bug, since continuous integration seems not to be favorite development practice in MS.

Btw, I very appreciate that we can write mails directly to vice president, but this is a horrible workaround for simple issue tracker, which would work much better for us than email ping-pong.

# re: HTML5 Improvements with the ASP.NET MVC 3 Tools Update

Thursday, May 12, 2011 11:16 AM by İhlas Temizlik Robotu

Thanks good article

# re: HTML5 Improvements with the ASP.NET MVC 3 Tools Update

Thursday, May 12, 2011 2:36 PM by Jason

My VS 2010 Text Editor toolbar does not have the Target Schema for Validation dropdown. I also cannot seem to find it when I try to customize the toolbar. Any help would be appreciated. Thanks.

# re: HTML5 Improvements with the ASP.NET MVC 3 Tools Update

Sunday, May 15, 2011 1:36 PM by ScottGu

@Sriram,

>>>>>>> What about the support for standards like WebSockets and IndexedDB that Microsoft has put up on html5labs.interoperabilitybridges.com Does MVC3 have special support for them?  Can we start using web sockets as an alternative to AJAX?

You'll see even more HTML5 server improvements coming to ASP.NET in the future. Stay tuned!

Thanks,

Scott

# re: HTML5 Improvements with the ASP.NET MVC 3 Tools Update

Sunday, May 15, 2011 1:37 PM by ScottGu

@mike,

>>>>>>> Please open up these templates to the community and stop making opinionated templates yourself.

You can create your own templates today and have them show up in the New Project dialog.  Phil Haack is planning to do a blog post showing how to do this shortly.

Hope this helps,

Scott

# re: HTML5 Improvements with the ASP.NET MVC 3 Tools Update

Sunday, May 15, 2011 1:38 PM by ScottGu

@Erwin,

>>>>>>> Looks interesting. Pity I am still working in Webforms, and I don't see many improvements there...

I'll be doing a blog post soon that talks about some of the great improvements coming to the next release of Web Forms.  There is a lot of HTML5 goodness happening there as well.

Hope this helps,

Scott

# re: HTML5 Improvements with the ASP.NET MVC 3 Tools Update

Sunday, May 15, 2011 1:39 PM by ScottGu

@Goran,

>>>>>>> I noticed that CSS3 is still not included in the Style Sheet Toolbar. Any specific reason for that?

I believe the SP1 changes help accommodate CSS3 more (meaning it doesn't complain if you use new CSS3 features).  I don't think we have full intellisense support for it yet though.  That will be coming in the future.

Hope this helps,

Scott

# re: HTML5 Improvements with the ASP.NET MVC 3 Tools Update

Sunday, May 15, 2011 1:40 PM by ScottGu

@jcapka

>>>>>> Great work. I seem to get an error with Modernizr however, and since it breaks execution every time I reload a page in debug mode, it becomes very annoying very quickly. I get this behaviour in a vanilla MVC3 Razor HTML5 site. The error is:  Microsoft JScript runtime error: Not implemented and it happens at this code in Modernizr

Are you running a Windows Server OS without the desktop enhancements installed, and running IE 9? If so, then this is a known issue:

github.com/.../224

It sounds like the next version of Modernizr will contain a fix for this.  

Hope this helps,

Scott

# re: HTML5 Improvements with the ASP.NET MVC 3 Tools Update

Sunday, May 15, 2011 1:41 PM by ScottGu

@Daniel Steigerwald

>>>>>>HTML5: It's very nice to see Microsoft finally perceive real word, but.. 'missing type attribute' warning made me turn off all shiny new HTML5 validation immediately. And it will probably take couple of years to fix this simple bug, since continuous integration seems not to be favorite development practice in MS. Btw, I very appreciate that we can write mails directly to vice president, but this is a horrible workaround for simple issue tracker, which would work much better for us than email ping-pong.

Can you provide more details on what error you are seeing and where?  Feel free to email me details (scottgu@microsoft.com).

Thanks,

Scott

# re: HTML5 Improvements with the ASP.NET MVC 3 Tools Update

Sunday, May 15, 2011 1:43 PM by ScottGu

@Jason,

>>>>>> My VS 2010 Text Editor toolbar does not have the Target Schema for Validation dropdown. I also cannot seem to find it when I try to customize the toolbar. Any help would be appreciated. Thanks.

Are you looking at the HTML Text Editor toolbar?  

You can also set the default schema option by going to Tools->Options then expand the Text Editor->HTML->Validation node and change it there.

Hope this helps,

Scott

# re: HTML5 Improvements with the ASP.NET MVC 3 Tools Update

Friday, May 20, 2011 4:13 AM by sakhsen

Thanks for the post. Useful information.

# re: HTML5 Improvements with the ASP.NET MVC 3 Tools Update

Monday, May 23, 2011 9:48 AM by Chris Bierman

When will the Modernizr.js Library be added to Microsoft's CDN?