Scott Hanselman

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

June 16, 2011 Comment on this post [77] Posted in ASP.NET | ASP.NET MVC | HTML5
Sponsored By

vshtml5Folks 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.

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

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

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.

HTML5 in the HTML Toolbar dropdown

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

Options (87)

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.

Adding an Audio Tag

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

Adding a main role to a nav tag

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

Adding aria-autocomplete to an IMG tag

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.

Adding http://schema.org/ attributes to an article

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.

CSS3 in the dropdown

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.

Some -webkit attributes

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.

Geolocation in JavaScript in VS

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

LocalStorage in the editor

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

About Scott

Scott Hanselman is a former professor, former Chief Architect in finance, now speaker, consultant, father, diabetic, and Microsoft employee. He is a failed stand-up comic, a cornrower, and a book author.

facebook twitter subscribe
About   Newsletter
Hosting By
Hosted in an Azure App Service
June 16, 2011 4:32
Dear God, does this mean that CardSpace is dead? Oh...never mind.


Seriously though, nice job to the team that did this.
June 16, 2011 4:47
I suggest adding Html5Boilerplate ?

Now if we could just get IE9 to support more HTML5 features... Chrome is kicking it's arse around the block and back.

http://diveintohtml5.org/
June 16, 2011 4:49
Meant to add a link to Dan Wahlin's recent blog post on the Html5Boilerplate:

http://weblogs.asp.net/dwahlin/archive/2011/06/05/getting-started-using-html5-boilerplate.aspx
June 16, 2011 4:55
Nice stuff. I would also recommend HTML5Boilerplate as a default template.
June 16, 2011 5:12
+1 HTML5Boilerplate
June 16, 2011 7:27
Fantastic.... but i feel kind of of disturbed that im not able utilize all these great features, there are many fantastic function that really solves alot of problem, but unfortunately if my users do not/unable to upgrade to a browser that supports HTML5, then im pretty much screwed...but good job, i hope More site will NOT support non HTML5 browsers, we NEED to UNITE!!!
June 16, 2011 7:28
Hm, most HTML5 folks agree the boilerplate is interesting for study but way overkill for the real world.
June 16, 2011 8:21
We do indeed need to unite, but the best way to do so is not to hold the rest of us back. HTML5 will push the web towards a stronger and more unified framework. The fragmentation is caused by those who refuse to advance, not those moving towards a more unified platform.
June 16, 2011 9:29
Will there ever be a chance to have a redistributable WYSIWYG HTML editor component from Microsoft as a spin-off from the VS.NET editor?

I love to use the MSHTML editing capabilities in my Windows Forms applications, just looking for something more modern.

Would love to pay money for something like that!
Uwe
June 16, 2011 11:17
IE9+MSSE: "Web Standards Update.msi is not commonly downloaded and could harm your computer" - oops ;-)
June 16, 2011 11:33
The .msi used to install this file is not signed as coming from MS. Is there a special reason for this?

If the faction is no longer 'rogue', please reconsider.
June 16, 2011 11:52
"Unable to install because a newer version of this product is already installed"
Oh actually I didn't install anything like that :(
Is it because my Visual Studio is not the english version?
June 16, 2011 11:55
Sorry for maybe an obvious question/answer: Does it work also for MVC views / DisplayFor templates /EditorFor templates ?
June 16, 2011 11:59
"Web Standards Update not only supports IE specific prefixes like –ms; but also other vendor prefixes like –webkit and –moz"

Does it also add the Opera -o- prefix too? (When I spoke at Microsoft devdays 2 weeks ago on HTML5, the Microsoft evangelists were very on the ball about using all the prefixes. See http://www.brucelawson.co.uk/2010/cross-browser-future-proof-css-3/ for more).

Disclosure: I work for Opera.
June 16, 2011 12:07
There's also CSS3 support. Yes, that's 1 better than CSS2.

Yes, but only 0.9 better than 2.1
June 16, 2011 12:33
Is it not supposed to show up under installed extensions?

It does not show up there for me, is it installed and working?
June 16, 2011 15:02
It asks me to install Visual Studio 2010 SP1 while the SP1 is already installed.
June 16, 2011 15:31
Of course this IS available via the Web Platform Installer, Yes?

No!

You mean No, not Yet! Surely?

Maybe, Microsoft wants to keep it's development software updates secret. You are only permitted to know about such releases if you are subscribed to certain blogs.

...and whilst we (or or at least I am) talking about the Web Platform Installer, I would like to take up Mohammad Mahdi Ramezanpour's point about which version of Visual Studio 2010 is currently installed.

On my system when I load VS2010 and click: Help -> About Microsoft Visual Studio

The following Information is displayed:
Microsoft Visual Studio 2010
Version 10.0.40219.1 SP1Rel

When I load Web Platform Installer 3.0 it still offers to install Visual Studio 2010 SP1 (Released 10-Mar-2011) .... Why?

The only other items it offers to install today (16-Jun-2011) are:
Orchard CMS (Released 14-Jun-2011)
Wordpress (Released 26-May-2011)

This is with the All option selected.
June 16, 2011 16:38
Installed but doesn't show up on VS2010 SP1. Schema dropdown is just greyed out.
June 16, 2011 16:45
Got it, you have to have "Show Errors" checked in the Text Editor HTML Validation options;)
June 16, 2011 16:47
Interesting/odd thing is it puts a green squiggle under things like "Literal" in <asp:Literal ID=.....

You'd think it would know not to!
June 16, 2011 17:15
Great, let's start enjoying HTML5 & CSS 3
June 16, 2011 17:53
I do ui dev/uxd and I agree that boilerplate is probably an overkill. http://html5reset.org/ is a nice starter that I use as a template. Also, its essential to have some sort of html5shiv to make the new html elements work for IE. Both boiler plate and reset have this in some form. Make sure you include that with your awesome new html5 app.

Best,
Ken
Ken
June 16, 2011 19:51
This is the kind of announcement Scott Gu's used to do. Are you taking his place since he moves to Azure?
June 16, 2011 19:52
You need a LIKE button
June 16, 2011 20:13
Does the update also rip out the WPF and Silverlight design surfaces?

(You never know, these days.)
Ben
June 16, 2011 20:24
What? It's not available via in NuGet?????? (Oops, someone else proded that one. Well, I was being tongue-in-cheek...)
June 16, 2011 23:13
Brian - This download updates files in Program Files, and not projects, so it can't be in NuGet. ;)

Ben - Yes, we also uninstall Silverlight, Google Chrome, then format your D: drive just to be sure. ;)

Michael - Hm, do I? And a +1? I do have a Facebook Page.

Vincent - Nah, Scott didn't know about this thing, it was as surprise. Maybe if I take his place they'll give me a bag of money?

Ken - Yes, I prefer the Reset to the Boilerplate for basic stuff.

Craig - Are you still seeing this?

Bruce - We'll get Opera in the next update!

Ignat - Yes, anywhere there is an HTML editor.

Luddite - We can't add it to WebPI until it's official. Soon.

Mo - It appears we have a detection issue. We are working on that NOW.

Ergomane - We are signing it now...working on it.
June 16, 2011 23:14
@Ken- Just be careful not to "over shiv" (or "over polyfill," if you will). Modernizr also provides basic polyfills for things like HTML5 elements. If you use Modernizr, you don't need (or want) the extra JavaScript polyfilling from Reset or Boilerplate or Shiv.

It's easy to have two scripts providing the same polyfill, which is just wasting JS processing time. I've made that mistake in the past...

June 17, 2011 0:24
Rather offtopic, but out of curiousity, why do so many Visual Studio-related installers end up rendering their text without ClearType? (Indeed, no font smoothing at all.) It's pretty jarring, and I've always wondered about it... This one does too.
June 17, 2011 0:51
Is Silverlight already dying? Seems like all MS talks about now is HTML5.

I thought they meant to be competing technologies.

Why start with Silverlight at all if you'll have open HTML5?

Why so much support for HTML5 from MS if Silverlight is MS creation and should be promoted first?
June 17, 2011 0:53
Jake - Sigh. I've blogged about Silverlight vs. HTML5 before and there's just not much more to say. HTML5 works great. If you are making websites, use it. If there's something you can't do easily with HTML5, or a fancy LOB experience or cool DVR you want to do, use Silverlight.
June 17, 2011 1:00
Great! So....when will VS2010 support jQuery Templates? :)

June 17, 2011 3:22
Javier - Support it in what way? I use them all the time. What are you looking for?
June 17, 2011 4:08
Allah taimaka
June 17, 2011 5:17
I’m a bit confused here. How does the VS Web Standards Update work with Modernizr? Please consider a blog along the lines of your “Should I use HTML5 or Silverlight? One man's opinion.”

It seems to me that Modernizr and not VS WSU is used for backwards compatibility. I don’t even know if you can use VS WSU and Modernizr together, if you should use them together, if you’re supposed to, etc. As someone who’s been waiting for the HTML5 tools to come out,

I haven’t been following any HTML5 development and I assume I’m not alone. So a little direction here would be welcome.
June 17, 2011 7:18
SGMarshall - This update is to make authoring HTML5, new JS and CSS3 easier under VS. It doesn't do anything to deal with older browsers. I will do a post explaining Modernizr next week. Modernizr is just a very clever JS library that's all.
June 17, 2011 16:07
Scott, I'm looking for syntax support and validation when you have a page with script tag of type "text/x-query-tmpl". One workaround I use is a Helper TemplateBlock class (thanks to Aaron!) that lets me define a template section and gives me some HTML validation but it still doesn't like some jQuery Template syntax in the middle of my HTML.
June 17, 2011 22:54
I'm still in the hopes for files referencing javascript/css files without needing to reference them in the header of the file, in order to get intellisense. I hope a feature like that can make these 'updates'.
June 18, 2011 4:03
Now if only ASP.NET would allow <input type="email"> etc. in combination with runat="server" without throwing a parser error...
June 18, 2011 7:25
Oh I just realized ES5 isn't supported :(. Sad times... would have loved to get intellisense for my Object.create'd objects, or Object.defineProperty'd properties.
June 18, 2011 9:27
Glad to see this update finally come about..been looking forward to it for quite some time.

Seen some posts about having html5-boilerplate as a default template available...made one awhile back that stripped out some of the extra stuff and uses normalize css in place of a css reset. Template is located under the download packages when clicking the download button for the source on GitHub.

https://github.com/justinlabenne/HTML5-ASP.NET-Web-Site
June 18, 2011 20:17
Nice work! I appreciate Microsoft's newfound passion for open web languages!
June 19, 2011 15:43
How could i set CSS3 scheme by default as well? because it is getting switched back to 2.1 after i reopening the CSS file.
June 20, 2011 21:31
Hi Scott.

here at Prometheus Development we did a nice work , a new framework (over Standard MVC 3.00) named MVCPlus which is named by people MMVC also.

inform this and if you like , email me ,
MVC Plus is welcomed by people for the way it work and it work as ORM and fieldmapping and it have many many new ideas are came into a commercial product now , less code, more high quality product, we like to see a day microsoft support this new movement (which started from JAVA) .

actually, MVC PLUS is much more advanced than standard MVC.

www.codeproject.com/KB/library/MVCPlus.aspx

more screenshots will surprise you ! it was originally designed to say against Silverlight by our team but finally, it used in many commercial project and it is growing so fast.

please email me if you like to know more about it.
Regards
Ryan Samiee
MCs and Senior Software Architect
June 20, 2011 21:38
after you inform

www.codeproject.com/KB/library/MVCPlus.aspx

this is a new library and component model in web with new concepts and manything were never described such as :
JavaScript SandBox Model
MetaModel

in other hand, it is against JQUERY with a different way of handling of codes, of course it is 100% DB Centric system so, it is have very few codes. when you read that you will undersand what we did exactly.

and it is only 100% db centric system with no refresh,,, and .... many more....

:) it is not opensource yet but if you email me , i will send you a copy of source...
June 21, 2011 0:33
Scott,

I just installed this and I find it impressive that the rogue faction on the Web Platform and Tools team, spearheaded by Mads Kristensen, would choose to list YOU, SCOTT HANSELMAN, not Microsoft, or the Web Platform and Tools team or even Mads Kristensen, as the publisher of this update.

You clearly have a lot of swing...
June 21, 2011 0:54
Brian - Or, I was the guy who had a cert.
June 21, 2011 3:02
perfect as always you are Scott
June 21, 2011 3:54
I installed it and can see the HTML5 intellisence. BUT I cannot get any intellisence/validation for CSS3. I have checked "Show Errors"
June 21, 2011 4:21
Do forgive me but don't we get a good portion of this by just installing VS2010 SP1?
June 21, 2011 8:27
Samuel - You get a bunch of bug fixes with SP1, but this update has *literally* hundreds of new elements and stuff, so yes SP1 is a basic start, but this is lightyears ahead. Good question!

SamD - Did you select CSS3 from the toolbar dropdown?
June 21, 2011 9:57
Any news on that Visual Studio 2010 SP1 detection problem?
June 22, 2011 4:20
Why can't this be an official release from Microsoft again and why must we wait until the next version of VS for HTML5 to be officially supported? Microsoft browsers support this so called moving target, why is it so much more difficult for VS to support it? I would've thought the exact opposite was true. Surely releasing browsers to millions of people if the standards are changing that much it more problematic than releasing a tool to a few hundred thousand developers? I was also under the impression that HTML5 was supposed to be an evolving standard with the individual browsers evolving to support the features as they became standard? So shouldn't Microsoft follow suit and provide tools that also evolve to support the standards rather than having to wait 2+ years for the next version of the IDE?

June 22, 2011 16:40
Why not expand your rogue faction and make this type of thing open source?

Yesterday on twitter you asked for suggestions for things to cover in a talk about Microsoft and open source. How about: why isn't open source the default model for free (as in beer) software releases?
June 23, 2011 21:55
Good news... but as an aside, I always wondered why Visual Studio needs you to set the version of HTML to validate against. Why the #@$%*( doesn't it just use the doc type in the HTM(L) file? We have files that use several doc types so this would be very useful.

I though I read somewhere VS2010 would use the doctype, but it still doesn't seem to be the case.

Get on it Scott!

BOb
June 23, 2011 21:56
Oh.. and I'd love to see comment feeds for your blog Scott. Or if you have them, Chrome isn't auto discovering them.
June 27, 2011 23:38
"The only reason why this got in spotlight was because press caught the wind of it having HTML5 and CSS3 support. "

Wow, wonder how that happened... http://www.hanselman.com/blog/AnnouncingTheWebStandardsUpdateHTML5SupportForTheVisualStudio2010Editor.aspx
June 28, 2011 3:35
Bob - I link to the comments feeds below each post and I also use the standard markup in my RSS. Chrome is stupid.
June 28, 2011 18:11
great stuff. So there is a future for visual studio, even though it looks like it is only going revolve around html5, css and javascript, especially if you are developing for windows 8.
June 28, 2011 23:38
Hey Scott,

Any progress on that SP1 detection issue? The HTML5 msi won't install for me either. Even tried reapplying SP1.
June 29, 2011 5:57
Do you know if anyone is working on ECMA5 support for visual studio? i.e. the the new array methods, property getters & setters, etc?
June 29, 2011 18:29
Is HTML5 support in Visual Studio 10 partial or full? I mean intellisense and validation are great, but will ASP.NET controls emit HTML5 compliant output as well? ASP.NET menu control can be a good example. Will it render its contents as HTML5 elements or it will emit traditional style output?
June 30, 2011 20:35
When I attempt to install the Web Standards Update, I get prompted to first install Service Pack 1 for VS2010. However, I've already installed this SP without incident. I tried re-installing SP1; but that didn't help. Running 64-bit XP.
July 21, 2011 14:16
This is great! The green and red error lines in the style sheets were really an eyesore! Thanks the Rogue faction :)
July 25, 2011 5:23
I have VS 2010 installed to D: drive. I do have HTML 5 support now, but not CSS 3.0. Can anyone help me understand this and to get support for CSS 3?

Thank you,
Jerry E. Ely

July 26, 2011 21:24
This extension is superb, especially the javascript intellisense support. For the next update (hoping one is planned), could you please, please consider adding intellisense support (or some .vsdoc files) for
1. XMLHttpRequest
2. JSON.parse, JSON.stringify
3. some ECMAScript 5 support where practical?

Maybe intellisense shouldn't matter that much, but it gives me that extra bit of confidence that my code is correct when I'm writing it. Most likely I'm going to keep using Visual Studio whether the javascript intellisense gets updated or not, but it sure would help make me a more productive ASP.NET developer. Thanks.
August 04, 2011 17:28
Great, thanks! Interestingly written review. For business process solutions it is the right way to get software development service.
September 27, 2011 20:43
Just to bump an issue I haven't seen in the comments here or on the VS gallery site: I installed the extension; I was prompted to install SP1 and there were no installation errors. However, I do not have any of the tools available in VS (neither HTML5 nor CSS3 shows up as a validation option, and Web Standards Update does not show up in the Extension Manager under Installed).

Any ideas? I'm running VS2010 Pro SP1 (MSDN license) on WinXP SP3
September 27, 2011 23:42
Is there an update as to why the standards update won't install because it thinks that SP1 isn't installed? I read throught the comments but don't see anything.
September 28, 2011 18:59
We are working on an update that will fix the issue with finding SP1 installed.
September 29, 2011 20:34
Quick kinda off-topic question. I need to allow my users to design html forms and i can't seem to find a good up-to-date editor. So I was wondering if the one used by VS is or will be redistributed.
I know i have another option like going with webkit.
Thoughts?

thanks
October 10, 2011 4:05
How about the Ajax editor? With more advanced features the Obout editor is very good (they wrote the code for the basic Ajax one)
October 17, 2011 10:30
If Visual Studio is installed in a directory other than c:, the web standards update fails to install - prompting to install SP1 - even though it is already installed.

The fix for the same is as follows: (Thanks to Wouter vanEck)


Get the ORCA tool from Microsoft (http://msdn.mi​crosoft.com/en-​us/library/aa37​0557(v=VS.85).a​spx) 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_VsdLaunc​hConditions" line, right-click and select "Drop Row".

Then Save the package and run it.


To Fix the CSS editing issue after the Web Standards Update is installed: (Thanks to Wasaeed)


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.

October 26, 2011 9:25
IntelliSense works fine in Code View but html5-specific features (e.g. border-radius) are not rendered in Design View. Maybe the rendering engine is still IE8.
November 03, 2011 15:53
Thank you - hate all the useless warnings now it's fixed.
November 13, 2011 20:30
After installing the extension I get an error every time I start to edit a CSS file. After clicking OK to dismiss the dialog everything seems to work fine. I don’t get this error when editing HTML5, only CSS. It doesn’t seem to matter what version of CSS is selected in the editor drop-down list. I logged the error as the dialog suggested, below is the relevant (i.e. only) error line from the log file:

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()


I hope this helps track down this problem, I appreciate the extension!

Joe

Comments are closed.

Disclaimer: The opinions expressed herein are my own personal opinions and do not represent my employer's view in any way.