6 Comments

Not everybody is able to upgrade to Visual Studio 2012 RC due to company policy or other reasons, but that doesn’t mean you can’t get some of its CSS 3 support in Visual Studio 2010 today. Whether or not you’ve got Web Standards Update installed or not, this is for you.

We’ve been able to port some of the support from Visual Studio 2012 into a format that is understood by Visual Studio 2010, but a lot of it I’ve had to port manually. Before proceeding, you should know that this is completely unsupported and at your own risk.

Here’s how to patch your installation of VS2010.

1. Download the new CSS 3 schema file

2. Locate the current CSS schema files. Mine are located at C:\Program Files (x86)\Microsoft Visual Studio 10.0\Common7\Packages\1033\schemas\CSS. If you customized your install directory, then it’s located somewhere else, but the path should be similar.

3. If you have a file called css30.xml (from Web Standards Update), then replace it with the new downloaded file. If you don’t have css30.xml, then replace css21.xml with the downloaded file. I recommend you backup the old file before overriding it – just in case.

4. Restart Visual Studio 2010.

Caveats

Visual Studio 2010 doesn’t support some of the new CSS 3 constructs and unit types. This new schema file will not help with that. It can’t. What you do get is all the standard and vendor specific properties with Intellisense and validation to the degree Visual Studio 2010 supports it.

Because a portion of this new schema was edited manually by me, it is possible that it contains a few bugs. Please report them in the comments if you find any, so I can get it fixed.

3 Comments

For the past few months, I’ve been looking at how to improve the web development experience in Visual Studio. This summer I released the Web Standards Update which brings HTML5 and CSS3 to Visual Studio, and a few weeks back Web Essentials was published.

This week I’ve been working on a proof of concept that eliminates the need for typing curly braces, colons and semi-colons when working with CSS. In non-English keyboard layouts, these characters can be rather difficult to type, because you need to use SHIFT and ALT to get to them.

Here is a quick demonstration of how to write CSS without the need for these characters.

I’ve been using this for about a day now on an English keyboard and I am so much more productive writing CSS. What I’m really interested in though, is whether or not YOU are when using this extension. Also, is it annoying, in your way, a waste of time, or the best thing EVAR!! Please try it out and let me know. I’d appreciate any feedback on this. Thank you!

Try it today!

Download the SpeedTyping extension for Visual Studio 2010 and let me know what you think on Twitter

Who knows, we might add this to the next version of Visual Studio…

2 Comments

Web Standards Update for Microsoft Visual Studio 2010 SP1We just released the first Web Standards Update for Microsoft Visual Studio 2010 SP1. Despite its name, the update also works for Visual Web Developer Express 2010 SP1. You can read more on our team blog.

In this first release of the update, we have focused on bringing the HTML5 support up-to-date, adding CSS 3 support and bring more new API’s to the JavaScript intellisense.  The plan is to make a release on a regular schedule to keep Visual Studio updated with the changes made by W3C.

HTML5

Last year, we managed to sneak in HTML5 support when working on SP1 for Visual Studio 2010. Normally, a service pack is about bug fixes but we found that HTML5 was so important that the lack of it should be considered a bug. Unfortunately we where not able to do the same with CSS3 or the JavaScript API’s, but it was a good start.

Due to a combination of the instability of the HTML5 specifications at the time and the resources we had to add HTML5 support for SP1, we ended up with very descent support for both intellisense and validation. Now the HTML5 specifications are more stabile and some additions and modifications have been made by the W3C since then. It’s therefore a good time to update the HTML5 and XHTML5 schema files that Visual Studio uses under the hood to provide intellisense and validation.

Among the changes are:

  • Added missing elements like u, s and bdi
  • The type attribute is no longer required on script elements
  • The source element is now supported inside video and audio elements
  • Support for microdata including intellisense for schema.org vocabularies
  • Full WAI-ARIA intellisense

CSS3

For CSS3 we were not as lucky as we were with getting HTML5 into SP1. This was largely due to a combination of time and resources in terms of available developers. CSS3 is more difficult because the specifications change much more frequently than the specification for HTML5. For us it is a constant battle with keeping up to date with these changes and subsequently getting them into the next version of this update. That way we make sure that you will always have the latest and most accurate CSS3 support in Visual Studio.

The CSS3 support includes:

  • Will not invalidate filter, zoom and behaviorproperties
  • Have intellisense for vendor specific schemas (-ms-*, -moz-* and -webkit-*)
  • Up-to-date intellisense and validation for CSS3 properties and values

JavaScript

We’ve gotten a lot of customers asking for better intellisense for some of the new web API’s such as DOM Storage and Geolocation. In this update we are including intellisense for a lot of the API’s found in EcmaScript 5 including:

  • New selectors such as getElementByClassName
  • Geolocation, DOM storage and other new web API’s

More info

Check out the unofficial announcement or Scott Hanselman’s run-through

Download

If you haven’t already, I encourage you to download the Web Standards Update for Visual Studio SP1and try it out today. It’s a small and quick install.

0 Comments

Since the release of Visual Studio 2010 SP1 beta last month, there has been a lot of questions regarding the support for HTML5 and CSS3.

HTML5

Visual Studio 2010 was originally released without HTML5 support, so does SP1 finally add support for it? Yes, to some extent. The entire HTML5 specification isn’t supported but most of the new elements and attributes are. That means you get both intellisense and validation for HTML5 with SP1.

Turn it on

After installing SP1 you have to tell Visual Studio to start using the HTML5 schema. Go to Tools -> Options, and then select Text Editor -> HTML -> Validation. You should now be able to select HTML5 or XHTML5 as the target schema.

clip_image002

Or if you have the HTML Source Editing toolbar enabled, you can select it in the target schema dropdown.

clip_image003

Intellisense support

The new elements that are specific to HTML5 are shown in the intellisense list as you would expect.

clip_image004

Even the new HTML5 specific attribute values for existing elements are shown.

clip_image005

Prior to SP1 there had been a bug that caused a runtime error when an input element used some of the new type attribute values such as email in conjunction with runat=”server”.

<input type="email" runat="server" />

This error has been fixed and will be included in the final SP1. However, it is not part of SP1 beta. In the meantime, you can use the Textbox control instead which doesn’t cause the error.

<asp:textbox type="email" runat="server" />

CSS3

In SP1 there are a few improvements in the CSS3 support as well, though not as elaborate as with HTML5. The editor now supports the more advanced selectors such as div:nth-child(2n+1)without giving validation errors and the new color values rgba, hsl, hsla and 8 digit hex values are also supported.

Start today

The conclusion is that with Visual Studio today, you can build HTML5 and CSS3 web applications on top of ASP.NET, and with SP1 we are making it a lot easier for you. We encourage all ASP.NET developers to start taking advantage of what HTML5 and CSS3 has to offer already today. The Web Platform and Tools team takes web standards very seriously and you will see much better support for HTML5 and CSS3 in the future.

7 Comments

I recently had to come up with a good argument for upgrading a Windows Server 2003 to Windows 2008 R2. It is used as a web server, so the benefit I was looking for was the upgrade of IIS 6 to IIS 7.5.

So I thought, why not make two deploys of the exact same website to both server editions and compare the performance. It so happens to be that there are many performance comparison articles about this floating around, but no one addressed the client-side aspect of the performance differences.

I’d already prepared the <system.webServer> section of the web.config with various performance tricks for IIS 7. Of course, IIS 6 ignores the <system.webServer> section and therefore don’t get any of the performance enhancements.

I’ve recorded the performance using YSlowand here is what the result looks like:

IIS 6 vs. IIS 7
Click for larger image

The reason for the slightly different file sizes is due to the compression level of the native IIS 7 compression and my custom compression library. The interesting part is when the browser’s cache is primed. That means when the visitor has visited the website before.

It should be noted that it is indeed possible to achieve the same performance metrics using IIS 6, but then you either need to add custom HTTP handlers or write to the IIS 6 metabase.

Here are the performance optimization tricks I used.