Wednesday, June 15, 2011

Announcing HTML5 & CSS3 support for Visual Studio 2010 SP1

image

Since the last few months it feels like web standards are moving at pace that we would really like them to move. Every browser is pushing the envelope ahead including our very own IE9. For the first time it feels like web is getting the extra freedom of expression that it deserves and we want to contribute to that.

ASP.NET developers have been asking for HTML5 & CSS3 support all the time and today we are super excited to announce the public availability of Visual Studio Web Standards Update which brings a ton of HTML5 & CSS3 support to Visual Studio 2010 SP1. VS Web Standards Update is a free extension available for anyone who is using Visual Studio 2010 SP1 and it provides HTML5 & CSS3 support based on current W3C specifications.

clip_image001

HTML5

clip_image004

VS Web Standards Update provides you intellisense and validation for most common HTML 5 features like:

· 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 - Having location aware websites is growing trend and now you will have full intellisense and validation within Visual Studio for creating websites which are location aware. For sample view the source for the IE9 test drive demo.

· Local Storage – IE has been supporting local storage from IE8 onwards, now Visual Studio will provide you with full fidelity intellisense to create sites which can save state within browser. For sample of try view source on HTML5 Demo Site

CSS3

clip_image005

This update supports intellisense and validation for most of the CSS3 modules including:

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

With all of the above goodness we hope you all will enjoy this update as much as we did creating it and hope you will share the good news with our larger developer community.

Sharable Links

· Download URL - http://visualstudiogallery.msdn.microsoft.com/a15c3ce9-f58f-42b7-8668-53f6cdc2cd83

· VWD Team Announcement post by Mads - http://blogs.msdn.com/b/webdevtools/archive/2011/06/15/web-standards-update-for-visual-studio-2010-sp1.aspx

· Walkthrough post by Hanselman - http://www.hanselman.com/blog/AnnouncingTheWebStandardsUpdateHTML5SupportForTheVisualStudio2010Editor.aspx

Finally, I want to call out that this update is made feasible due to heroic efforts by a lot our team members working on their personal spare time, so please give a huge shout out to our team including Mads Kristensen, Peter Spada, Van Kichline, Aliaksei Baturytski, Damian Edwards, Barry Tang, Bala Chirtsabesan, Alex Gavrilov, Xinyang Qiu, Jon Jung, Scott Hanselman, Teri Schroeppel & Yong Lee.

Thanks again!!

Vishal R. Joshi | http://vishalrjoshi.com | @vishalrjoshi

PS: The Web Standards Update works on both VS 2010 SP1 and VWD Express 2010 SP1. Being a VS Extension, it does not support certain CSS3 selector syntax & Browser API intellisense which would require servicing the shipping bits.

13 comments:

Anonymous said...

You got a bunch of stuff wrong on the CSS side, but for the most part its pretty good. (cursor, color, outline, outline-color, --webkit-padding-box, and more)
You should open source this and I'm sure you will get lots of fixes really fast.

micalaston said...

hey dude this is really nice blog.it provides HTML5 & CSS3 support based on current W3C specifications.please continue posted this type of another blog and thanks for sharing information

torrent download said...

Great post, much appreciated!

juegos de ben 10 said...

I love html5 , Is the standar html conding is faster than older and i am loved it.

Rascals said...

I feel strongly about it and love learning more on this subject. If possible, as you gain expertise, would you mind updating your web site with more information? It is extremely helpful for me.

Anonymous said...

Hello Vishal,

Thank you for the post. I have installed VS 2010 SP1 and I have been able to get the intellisense support for HTML5. But, I am not able to get CSS3 intellisene and my IDE does not even show CC3 as you have shown in the screenshot here. Sorry, for the trouble but do we need to install a separate addon for CSS3 support. Could you please shed some light on this?

Thank you,

ra one songs said...

I am glad to find your impressive way of writing the post. Now it become easy for me to understand and implement the concept. Thanks for sharing the post.

ra one said...

It proved to be very helpful to me and I am sure to all the commenters here! It's always nice when you can not only be informed, but also entertained! I'm sure you had fun writing this article.

web design company said...

That was really interesting to know about the html and css.Thanks a lot !

Mayank Bhagat said...

Problem with div with css image background. I can show in design view but it will not display in run time view, where is proble, also I found that Eisk working fine in both view. please update me for the saem

Internet Browser Support said...

The entire HTML5 specification isn’t supported but most of the new elements and attributes are.

garlie charls said...

You will need to get help in HTML5 Development
in order to make your site more attractive. This is a highly specialized job and you need to get help from the experts in order to have a site that can attract and retain visitors.

Flex Sin said...

if new feature makes something insecure then THIS feature is guilty, not websites html5