

The schemas and snippets are user-extensible. There’s block commenting, where a block selection or a line can be easily commented out with a key binding:Įxecute Edit/Advanced/Comment Selection (Ctrl-K Ctrl-C) and:Īnd 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. You can collapse regions as well as rules: 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: Type “8px” and, and each value is set to 8px and the cursor is in position for entering your next property. 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. They get full IntelliSense support, and validation will be added in the next release as well. It’s not all about hacks, but CSS property hacks are fully honored as well. If you haven’t heard of them, Bing “CSS Hacks” or ignore them all together. 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. 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: Naturally, it supports standard color names, hash codes, rgb, rgba, hsl, and hsla colors: 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. …and in this case, the new Color Picker pops up. When you type the colon, the full property name is inserted:

While the list may look overwhelming, as soon as you begin to type the list is trimmed down to matching properties:Įven 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”. Even more appear if you start your property name with a “-“, revealing all the vender-specific properties available: The first thing you’ll see is an overwhelming number of properties available, over 250. Select the CSS 1.0, 2.1, or 3.0 schema to work with (default is 3.0) and start typing. 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. The CSS Editor for Visual Studio 11 Developer Preview is a complete rewrite of the 2010 version, featuring excellent performance and stability.
