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.

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:

CSS3 in Visual Studio

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.

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.

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!!!

Hm, most HTML5 folks agree the boilerplate is interesting for study but way overkill for the real world.

Scott Hanselman

Thursday, 16 June 2011 04:21:16 UTC

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.

"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).

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 2010Version 10.0.40219.1 SP1Rel

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

Thursday, 16 June 2011 15:51:13 UTC

This is the kind of announcement Scott Gu's used to do. Are you taking his place since he moves to Azure?

Vincent Audette

Thursday, 16 June 2011 15:52:16 UTC

You need a LIKE button

Michael Flynn

Thursday, 16 June 2011 16:13:50 UTC

Does the update also rip out the WPF and Silverlight design surfaces?

(You never know, these days.)

Ben

Thursday, 16 June 2011 16:24:23 UTC

What? It's not available via in NuGet?????? (Oops, someone else proded that one. Well, I was being tongue-in-cheek...)

Brian Schnackel

Thursday, 16 June 2011 19:13:45 UTC

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. ;)

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

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.

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?

Jake

Thursday, 16 June 2011 20:53:27 UTC

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.

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.

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.

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.

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

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.

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.

Joker

Monday, 20 June 2011 17:31:14 UTC

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.RegardsRyan SamieeMCs and Senior Software Architect

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

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

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.

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?

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?

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.

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?

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.

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

Jerry E. Ely

Tuesday, 26 July 2011 17:24:06 UTC

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) for1. XMLHttpRequest2. JSON.parse, JSON.stringify3. 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.

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

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?

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.

Ludmil Tinkov

Thursday, 03 November 2011 11:53:55 UTC

Thank you - hate all the useless warnings now it's fixed.

Jim K

Sunday, 13 November 2011 16:30:33 UTC

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.