New CSS editor features in Visual Studio 11 Developer Preview

New CSS editor features in Visual Studio 11 Developer Preview

Rate This
  • Comments 7

The CSS Editor for Visual Studio 11 Developer Preview is a complete rewrite of the 2010 version, featuring excellent performance and stability. As soon as you start to edit a CSS file or a style block embedded in a web page, you'll feel the difference! CSS 3.0 has expanded the richness and complexity of style sheets considerably, and the new editor steps up to make the change not just manageable, but productive. Select the CSS 1.0, 2.1, or 3.0 schema to work with (default is 3.0) and start typing.

The first thing you'll see is an overwhelming number of properties available, over 250. Even more appear if you start your property name with a "-", revealing all the vender-specific properties available:

clip_image002

While the list may look overwhelming, as soon as you begin to type the list is trimmed down to matching properties:

clip_image003

Even better, if you type the first character of each word separated by hyphens you get a super-shortcut to narrowing the list, so a property name like text-decoration-color can be selected by typing "tdc". When you type the colon, the full property name is inserted:

clip_image004

...and in this case, the new Color Picker pops up. It includes a standard palette of colors, along with an MRU list of all the colors you've used in the document, with a pop-down detailed picker. Naturally, it supports standard color names, hash codes, rgb, rgba, hsl, and hsla colors:

clip_image005

The formatter now features hierarchical indentation of style specializations (which can be turned off in Tools/Options if you prefer.) This helps make copious CSS files much more readable:

clip_image006

Note that the last line the indentation is aware of CSS selector hacks, so if you have files that rely on them heavily, this feature does not become useless; they are ignored in the hierarchical ranking. If you haven't heard of them, Bing "CSS Hacks" or ignore them all together.

It's not all about hacks, but CSS property hacks are fully honored as well. They get full IntelliSense support, and validation will be added in the next release as well.

clip_image007

There's a lot more. The CSS editor is now a first-class Visual Studio Editor, so it supports Snippets, which are very handy in an environment where you need to specify four properties for a properly defined column-gap. Type cg <tab> <tab> and you get:

clip_image008

Type "8px" and <enter>, and each value is set to 8px and the cursor is in position for entering your next property.

You now get automatic and manual outlining, so you can easily collapse every definition block, or create a region for a large block of definitions:

clip_image009

You can collapse regions as well as rules:

clip_image010

There's block commenting, where a block selection or a line can be easily commented out with a key binding:

clip_image011

Execute Edit/Advanced/Comment Selection (Ctrl-K Ctrl-C) and:

clip_image012

And there's still a lot more, like Smart Indent, higher-availability IntelliSense triggering, tooltips for all properties and values, and all the standard features you had in previous versions of CSS editing.

The schemas and snippets are user-extensible. We're developing a system to deliver schema updates as Extensions managed by the built-in Extension Manager so that IntelliSense and validation will keep up with the fast-changing CSS 3.0 standards. And we're looking for your input. It's not too late to make changes and additions. What else would you like to see? How can we make your CSS editing experience even more productive? Give us your suggestions at http://aspnet.uservoice.com and Forum: ASP.NET 4.5 Developer Preview and Visual Studio 11 Developer Preview .

 

Van Kichline, VWD Test Team

Peter Spada, VWD Dev Team

Leave a Comment
  • Please add 8 and 7 and type the answer here:
  • Post
  • Could you add in color picker ability to provider color in RGB and HSV?

  • Hi, it would be really nice if the color picker when showing recently used colors would also show the tags where they are used - there might be many similar colors so just picking by visual color is hard. Picking by "the one previously used by h1" would be a dream!

  • I've been awaiting this improvement for years and I don't know why they got so late for implementing this editor. I was actually expecting a big leap in Visual Studio 2010.

  • There's a slick plugin for 2010 right now (which is a bit crashy)...but it underlines the color code in the CSS with the color itself (like a border-bottom: 5px solid), can you add that as native perhaps?

  • For the CSS-Challenged developers...this is AWESOME!

    Thank you

  • @slawek,

    In Tools -> Options you set which format you want to use in the color picker. Hex, RGB or HSL. We have chosen Hex by default since that is likely what most people will use.

    @allan k.,

    That's an awesome suggestion. I'll add it to our backlog. Thanks!!

  • @Mads Kristensen

    I prefer HEX too. I would rather think about providing RGB, HSV, CMYK or HEX colors in color picker window like we do in Photoshop or Paint.NET. This is very usefull if I have Brand Manual or other reference with RGB,CMYK color and I want to convert this to my favorite HEX notation. Now I must run Photoshop or Calculate to convert that.

Page 1 of 1 (7 items)