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 some folks on the Web Platform and Tools team, spearheaded by Mads Kristensen are all 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.
Note that this isn't an official Microsoft product release, rather improved support from passionate people done in their spare time.
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:
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.
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.
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.
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
Scott Hanselman is a former professor, former Chief Architect in finance, now speaker, consultant, father, diabetic, and Microsoft employee. I am a failed stand-up comic, a cornrower, and a book author.
There's also CSS3 support. Yes, that's 1 better than CSS2.
Get the ORCA tool from Microsoft (http://msdn.microsoft.com/en-us/library/aa370557(v=VS.85).aspx) this is a MSI editor. Once you have it, start it and Open the downloaded "Web Standards Update.msi" package. In the Tables, select the "CustomAction" entry, Once selected, in the right pane, select the "VSDCA_VsdLaunchConditions" line, right-click and select "Drop Row". Then Save the package and run it.
Also copy all the folders and files under the C:\Program Files (x86)\Microsoft Visual Studio 10.0\Common7\Packages folder to the similar folder under the drive where Visual Studio is installed.
System.ArgumentOutOfRangeException: Specified argument was out of the range of valid values. Parameter name: index at Microsoft.VisualStudio.Text.Implementation.SimpleStringRebuilder.get_Item(Int32 index) at Microsoft.VisualStudio.Text.Implementation.TextSnapshot.get_Item(Int32 position) at MadsKristensen.WebEssentials.ColorSmartTagger.GetRealSnapshot(String classification, SnapshotSpan currentSpan, ITextBuffer buffer) at IntraTextAdornmentSample.ColorTagger.<GetTags>d__0.MoveNext() at Microsoft.VisualStudio.Text.Tagging.Implementation.TagAggregator`1.<GetTagsForBuffer>d__16.MoveNext()
Disclaimer: The opinions expressed herein are my own personal opinions and do not represent my employer's view in any way.