HTML5, CSS3 and Javascript improvements in Visual Studio 11

by Pawel Bejger on 2nd March 2012

Visual Studio 11

Mads Kristensen gave a very interesting lecture at TechDays 2012 in The Hague about all the new functionalities and options in Visual Studio 11 and ASP.NET 4.5. 

While browsing through the list of new features we can get the impression that this time the main focus was put on web standards and HTML5. A lot of work has also been done to make the use of HTML5, CSS3 and Javascript considerably easier by means of Visual Studio environment. Both the Javascript and CSS editors were built from scratch. Therefore, they are now able to handle all the new features supplied by newest versions of Javascript and CSS. Now, let’s see what new Visual Studio 11 has to offer to support building applications compliant with the latest web standards and HTML5. 

CSS Hacks automations

We all know that HTML5 and CSS 3 are cool and easy. However when creating a more complex web application, it is common that we need to apply some specific settings (we can call them CSS hacks) to a specific browser. This eats up much time and might be frustrating. . VS11 supports CSS hacks by means of Intelli Sense and ‘*’ and ‘_’ property hacks validation. 

CSS Hacks

Commenting and uncommenting CSS rules

How many times did we get frustrated by the fact that we couldn’t use the shortcuts CTRL+K,C for commenting and CTRL+K,U for uncommenting while working in CSS editor? Why was it not possible to use them in CSS editor if we could use them everywhere else? Fortunately, this has been improved and from now on we can use the above shortcuts not only in code editor but also in CSS editor. 

Snippets in CSS editor

Code Snippeting is a powerful Visual Studio mechanism. The only problem was that it could be used only in the code editor, whereas in the CSS editor such an option didn’t exist. It has been improved in the new VS IDE. Now many CSS3 properties that require some browser-specific settings are a part of ready snippets. 

Visual Studio Snippets in CSS Editor

Colour picker

The CSS editor has been enhanced in such a way that you can now use Intelli Sense to pick up one of the colours already existing in your stylesheet or simply choose another one via the colour picker control. This feature has been thoroughly explained by Scott Guthrie in one of his blog posts.

Javascript Editor

The main problem with using Javascript in Visual Studio was that it was usually slow (especially when you were debugging). The new version of Javascript editor is based on the Chakra engine (used in IE 9 and in IE10), which is much faster. 

Furthermore, some additional improvements have been made to make VS Javascript editor more powerful and usable for a programmer. This has been mostly achieved by adding some options already available in Code Editor and some new ones. Below I listed the most interesting ones:

  • “Go to definition” option 

You can now use this option also in Javascript files, which makes it considerably faster to jump from one function to another. 

  • Brace matching 

How often have you encountered a problem with Javascript throwing an error, because some brace has not been closed? And then, did you have to go from brace to brace trying to find the missing one? In the new Javascript editor this problem will not appear – the brace matching option known from code editor has been added to Javascript editor as well. It works in such a way that when your pointer is focused on one of the brackets, it automatically highlights the matching one.

  • Implicit referencing

You can now add a certain JS file to the central list of files, without the need to add it to every place where it is used. What is more when a Javascript file is added to the central list its content an Intelli Sense support for this file will be available in any other Javascript block or file. 

  • Support for ECMAScript5 

ECMAScript5 is the latest version of the standard that describes the Javascript, JScript and ActionScript languages. New Javascript editor supports the new syntax and APIs presented in ECMAScript5. 

Revolution or just evolution?

After reading this article you can come to a conclusion that VS11 contains rather minor improvements concerning CSS3, HTML5 and Javascript. No dramatic changes have been introduced. No revolution has been made. On the other hand, when gathered all together the above changes provide quite a considerable usability improvement of the whole VS environment, which was previously usable only for software developers rather than for frontend developers. By introducing such small enhancements the overall work needed from a frontend developer to build the frontend of the application can be significantly smaller.

Moreover, building a web application can be finally more a pleasure than an agony. 

What is your opinion about the new features in Visual Studio 11 concerning CSS3, HTML5 and Javascript? Do you think they might be useful in your daily work? Feel free to share your thoughts and leave a comment below.