VS2010 SP1 New Features: HTML5 and CSS3 Support

  • Article

Menu:   Tools | Options | Text Editor | HTML | Validation
Command:  Tools.Options
Versions:  2010 SP1
Code:  vstipEdit0096

 

 

One of the more exciting new features included with Visual Studio 2010 Service Pack 1 is new support for HTML5 and CSS3. Specifically, according to the web team:

“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. […]

 

[T]here 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.”

https://blogs.msdn.com/b/webdevtools/archive/2011/01/27/html5-amp-css3-in-visual-studio-2010-sp1.aspx

 

There doesn’t appear to be any updates to the online documentation that I have found to list out the extent of the support for HTML5 or CSS3 but I expect we will see that at some point in the future. With that said, let’s take a look at how you can take advantage of these new features.

 

 

 

HTML5

To take advantage of the new HTML5 support you can go to Tools | Options | Text Editor | HTML | Validation | Target and change the Validation to HTML5 or XHTML5:

clip_image001

 

Also, if you have the HTML Source Editing toolbar available then you can just choose from there:

clip_image002

 

Regardless of the method used the result can be seen in IntelliSense when you use any of the new elements or attributes in HTML5:

clip_image003

 

 

 

CSS3

As noted before, the CSS support isn’t quite as complete as the HTML support. There is some support for new selectors and color values without causing errors but not much in the way of IntelliSense support. In your style sheet files you will not see a CSS3 option from the drop-down on the Style Sheet toolbar:

clip_image004

 

However, if you want something more in the short-term there is an extension in the Visual Studio Gallery:

clip_image006

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

This extension is not from Microsoft so use it at your own risk but may at least serve as a stop gap measure until fuller support is available.