HTML5 & CSS3 in Visual Studio 2010 SP1

HTML5 & CSS3 in Visual Studio 2010 SP1

Rate This
  • Comments 29

Since the release of Visual Studio 2010 SP1 beta last month, there has been a lot of questions regarding the support for HTML5 and CSS3.

HTML5

Visual Studio 2010 was originally released without HTML5 support, so does SP1 finally add support for it? Yes, to some extent. The entire HTML5 specification isn’t supported but most of the new elements and attributes are. That means you get both intellisense and validation for HTML5 with SP1.

Turn it on

After installing SP1 you have to tell Visual Studio to start using the HTML5 schema. Go to Tools -> Options, and then select Text Editor -> HTML -> Validation. You should now be able to select HTML5 or XHTML5 as the target schema.

clip_image002

Or if you have the HTML Source Editing toolbar enabled, you can select it in the target schema dropdown.

clip_image003

Intellisense support

The new elements that are specific to HTML5 are shown in the intellisense list as you would expect.

clip_image004

Even the new HTML5 specific attribute values for existing elements are shown.

clip_image005

Prior to SP1 there had been a bug that caused a runtime error when an input element used some of the new type attribute values such as email in conjunction with runat=”server”.

<input type="email" runat="server" />

This error has been fixed and will be included in the final SP1. However, it is not part of SP1 beta. In the meantime, you can use the Textbox control instead which doesn’t cause the error.

<asp:textbox type="email" runat="server" />

CSS3

In SP1 there are a few improvements in the CSS3 support as well, though not as elaborate as with HTML5. The editor now supports the more advanced selectors such as div:nth-child(2n+1) without giving validation errors and the new color values rgba, hsl, hsla and 8 digit hex values are also supported.

Start today

The conclusion is that with Visual Studio today, you can build HTML5 and CSS3 web applications on top of ASP.NET, and with SP1 we are making it a lot easier for you. We encourage all ASP.NET developers to start taking advantage of what HTML5 and CSS3 has to offer already today. The Web Platform and Tools team takes web standards very seriously and you will see much better support for HTML5 and CSS3 in the future.

Leave a Comment
  • Please add 6 and 6 and type the answer here:
  • Post
  • Very nice to hear. I do wonder though about where to report and/or fix problems in the schema? For example, according to the spec the "rows" and "cols" attributes on textarea are optional, but according to the validation schema, they are required.

  • Finally,

    Hope it supports most of the HTML5 elements. I just installed an addon for Expression Web to support HTML5.

  • @Dominic Denicola - Copy that. This also applies to the attribute 'type=text/javascript' on the script tag. The editor/validator says they're required, but according to the W3C specs, they're optional.

    It would be nice to have place to report these issues.

  • Try the Connect website.

    connect.microsoft.com/VisualStudio

  • Done: connect.microsoft.com/.../640151

    @Peter Kassenaar: although I noticed that issue with the earlier release of HTML5 schemas, the ones bundled with VS2010 seem to have fixed that, as well as many other issues.

  • Quote:

    "We encourage all ASP.NET developers to start taking advantage of what HTML5 and CSS3 has to offer already today."

    Ok, but you should also do a better job encouraging IE6 users to upgrade ;-)

  • Quote:

    "Ok, but you should also do a better job encouraging IE6 users to upgrade ;-)"

    I think Microsoft has tried all possible means within the limits of law and their service agreements.

  • @David

    Make sure to include "modernizr" (http://www.modernizr.com/) to keep IE6 behaving

    I think MS has done a decent job of trying to get people off IE6, but unfortunately big businesses and the like are molasses-slow to make changes

  • It was a short and nice artical and very useful to resolve the configuration trouble

  • you can use this extension for CSS3

    visualstudiogallery.msdn.microsoft.com/7211bcac-091b-4a32-be2d-e797be0db210

  • does this include drag and drop html 5 upload dialog, which are supported in Chrome and Firefox?

  • when you set use

    <asp:textbox ID="Textbox1" type="email" runat="server" />

    it renders dual types

    <input name="Textbox1" type="text" id="Textbox1" type="email" />

    Browsers that are html5 aware do not see the second type. Is there a way around this?

  • Informative post. I liked it. Hope you will keep coming up with such good stuff.

    Web Design Company logicspice.com

  • Informative post. I liked it. Hope you will keep coming up with such good stuff.

    <a href="http://www.logicspice.com">Web Designing Company</a>

  • I am waiting for SP1's official release.

Page 1 of 2 (29 items) 12