Announcing the Web Standards Update - HTML5 Support for the Visual Studio 2010 Editor

Folks have been asking "When will VS2010 support HTML5?" I've been saying, jokingly, that the answer is "yesterday" as there's nothing keeping you from creating HTML5 in Visual Studio or ASP.NET today. However, there's no intellisense and there's lots of squiggly lines that make people uncomfortable. Combine all that with the fact that HTML5 is a moving target, and it's unclear. We've said before that the next version of Visual Studio will have better support HTML5, but what about today?
Today, a rogue faction of the Web Platform and Tools team, spearheaded by Mads Kristensen, is pleased to announce the Visual Studio Web Standards Update. This adds better support for HTML5, CSS3 and new JavaScript features to ALL versions of Visual Studio.

Download the first Visual Studio Web Standards Update

HTML5 moves fast, and this update will aim to keep up with it. It adds support to Visual Studio and the editor for HTML5, CSS3 and new JavaScript features. The goal is perhaps an update every quarter or so as new features or elements emerge. We want ASP.NET web developers to always be able to use the latest standards, as well as being able to choose from existing standards. Remember that you can use HTML5 today along with JavaScript libraries like Modernizr that allow you to create pages that work across nearly all browsers, including old crappy ones.
The Visual Studio Web Standards Update provides you with intellisense and validation for:

HTML 5 features

Video & related tags Audio & related tag New input types like email, url, date etc

Drag & Drop support Accessibility standard WAI-ARIA

Microdata Schema.org & more SEO friendly goodness

Browser APIs

• Geo-Location - Location aware websites are a clear, growing trend and now you've got full intellisense and validation within Visual Studio. For a nice sample, view source on the IE9 test drive demo.
• Local Storage – IE has been supporting local storage from IE8, so now Visual Studio will provide you with full-fidelity intellisense to create sites which can save state within the browser. For sample of this, do a view source on HTML5 Demo Site

CSS3

2D Transforms 3D Transforms Animations Background & Borders Basic Box Model Basic UI Behavior Color Flexible Box Layout

Fonts Generated Content for Paged Media Hyperlink Presentation Line Lists Marquee Media Queries Multi Column Namespaces

Paged Media Presentations Levels Ruby Selectors Speech Syntax Template Layout Text Transitions

Additionally, if you are trying to make websites which work on a variety of platforms and browsers you will love the fact that Web Standards Update not only supports IE specific prefixes like –ms; but also other vendor prefixes like –webkit and –moz.

HTML5 in Visual Studio

When you start up Visual Studio 2010, you can select what version of HTML you want on a file-by-file basis, or set the defaults.
Side Note: See how IE6 is in there on its own? That's been there since before forever. Hopefully it'll be gone soon. Ignore it.

You can also set it as the default in Tools | Options | Text Editor | HTML | Validation. Note the options for errors.

All the new HTML5 semantic tags are there, like section, svg, video, etc. This is just the first release, and while it's REALLY comprehensive, I'm sure it has some bugs. But, it'll be updated regularly, so make sure you report anything you find and look for it to be fixed in the next release.

There's even support for important (but under-utilized and under-respected) attributes like the WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications)

Also the aria-* attributes appear not only as intellisense enabled attributes, but also their enumerated values:

Tags are fun, sure, but how about microdata? Bing, Google and Yahoo are all supporting Microdata and more specifically the schema.org vocabularies. This update will therefore add intellisense to the most popular vocabularies including schema.org and data-vocabulary.org.

Seriously, tell me that's NOT the hotness. Awesome for SEO.

CSS3 in Visual Studio

That's just the HTML5 stuff. There's also CSS3 support. Yes, that's 1 better than CSS2.

It includes all the cool new CSS3 stuff like column-full and of course border-radius as well as animations and transforms. There's also lots of details on vendor-specific prefixes like -webkit, -moz and -ms.
Note the informational tooltip in the dropdown here as we pick a -webkit-transform shorthand property.

JavaScript and HTML5 in Visual Studio

There's a huge number of additions to JavaScript intellisense in this update. Things like geolocation via navigator.geolocation and DOM storage via window.localStorage.

Here's a slightly less trivial snippet of HTML5 and JavaScript using some new local storage features and showing the intellisense.

Say what you like about intellisense as a concept or crutch, but I like to think of it as a just-in-time object browser that helps me explore new technologies as well as discover nooks and crannies that I might not see.
We don't know what all will come in the next version of Visual Studio, or the next version of HTML5, but for those of you who are interested, we hope this "living update" of Web Standards support for Visual Studio will help you out!
Enjoy, Dear Reader.
P.S. This is an update for ASP.NET and HTML5 editing people who want to use HTML5, new JavaScript features and CSS3. I didn't mention Silverlight because it has nothing to do with Silverlight. I said once "just because your favorite technology isn't mentioned in a keynote doesn't mean it's dead." Assume that the same rule applies to a Blog Post.
P.P.S. No, that logo to the right isn't official anything and yes, it's fun.
Related Links

• Visual Web Developer Team Blog - Web Standards Update for Visual Studio 2010 SP1

---

© 2011 Scott Hanselman. All rights reserved.

"