New CSS Editor Improvements in Visual Studio (ASP.NET 4.5 Series)

This is the seventh in a series of blog posts I'm doing on ASP.NET 4.5.

The next release of .NET and Visual Studio include a ton of great new features and capabilities.  With ASP.NET 4.5 you'll see a bunch of really nice runtime and tooling improvements with both Web Forms and MVC - as well as in the core ASP.NET base foundation that both are built upon.

Today’s post covers some of the improvements we are adding to the next release of Visual Studio to make working with CSS and CSS3 even better with ASP.NET projects. 

CSS Color Picker

In previous versions of Visual Studio, the intellisense engine within the CSS editor provided a hard-coded dropdown list of named color values. The new release of Visual Studio replaces this with a full featured color picker that makes it easy to choose from colors already used elsewhere within the stylesheet – as well as to create new custom color styles.

When you are in the CSS editor and edit a color value for a CSS property, a new color picker will now automatically appear.  It by default displays a list of previously used colors within the stylesheet – as well as a sample palette of default colors to use.  You can select a color from this list using either the mouse or keyboard:

image

You can select the “+” icon to expand the list into a full-fledged color picker for more granular color selection.  It lets you control the alpha channel by automatically converting any color into a CSS3 RGBA value when moving the opacity slider.  It also includes a “color selector” function that allows you to use an eye-dropper to select a color from any other web-site you have loaded in a browser or from other apps you have running on your system:

image

Great Video: Watch this 60 second video to see the color picker in action.  It shows using other colors in the same stylesheet, creating a new color, using the CSS3 opacity capabilities, as well as the eye-dropper to capture the color from another application/site.

Cross Browser and CSS3 Snippets

Writing stylesheets can sometimes feel a bit repetitive when it comes to working with all of the vendor specific versions of the same CSS3 properties. You often have to write the same property values for each of the browsers - which in some cases requires writing 5 identical values. It’s tedious but necessary work to support all browser versions.

The next version of Visual Studio includes support for CSS snippets that auto-generate all of the vendor specific properties. That means no more tedious searching and typing to get your CSS3 properties working cross-browser.

CSS snippets work just like code-snippets from other editors within Visual Studio today.  For example, to invoke the snippet for the CSS3 transition property, simply type “transition” or select it from intellisense within a CSS stylesheet:

image

Then hit the TAB key and Visual Studio will execute the CSS transition snippet and generate the code to support all browser prefixes.  It will also allow you to change the value only once and then automatically propagate it to all the other values properties:

image

Great Video: Watch this 60 second video to see CSS snippets in action.  It demonstrates how snippets can help with both vendor prefixes, as well as to support scenarios like media queries to support multiple screen sizes, and cross browser font-face embedding.

Hierarchical CSS Indentation

A trend we’ve seen when looking at real-world stylesheets is that web developers are often using indentation to create and maintain parent/child relationships between the individual CSS rules. This creates a tree-like hierarchy that makes it easier to see the relationships between the rules and where they logically belong in the document:

image

In previous version of Visual Studio it was cumbersome to maintain these hierarchies manually, and if you did the CSS formatter would remove the extra indentation. That meant you had to take care of formatting the entire stylesheet manually.

In the next release of Visual Studio we are adding built-in support for both creating CSS hierarchies as well as maintaining them when either the selection or the entire document is formatted. This makes it really easy to review the structure of a stylesheet and the sometimes complex relationships of the cascading order of the rules within it.

The brand new CSS editor in Visual Studio also understands and supports common CSS hacks, and we brought this knowledge into the hierarchical indentation mechanism to maintain the cascading position of a rule even if it is prefixed with a hack as illustrated in the screenshot below.

image

Great Video: Watch this 60 second video to see CSS Hierarchical Indentation in action.  It shows creating hirarchical CSS rules, as well as how they’ll work even when using CSS hacks.

Summary

The new release of ASP.NET and Visual Studio will make it easier to take full advantage of CSS within ASP.NET applications. 

This post covered some of the CSS editor improvements we are making in Visual Studio to support this.  My last post covered some of the JavaScript and CSS bundling and minification runtime work.  In future posts I’ll also talk about some of the ASP.NET web form control and ASP.NET MVC helper improvements we are making to better use CSS as well.

Hope this helps,

Scott

P.S. In addition to blogging, I use Twitter to-do quick posts and share links. My Twitter handle is: @scottgu

28 Comments

  • Hi Scott,
    These is great. Could you add color underline like it is in devColor extension and provide ability to convert color from RGB to HEX.

  • Looks useful.
    However, regarding CSS formating, is the layout configurable?
    I really dislike having the closing brace at the end of the first line.
    Rather, I strongly prefer to place it on the start of the next line.
    For example, rather than...

    p {
    color: red;
    }

    I prefer this:

    p
    {
    color: red;
    }

    This style is also how I write code such as class and method declarations.

  • The color picker could use HSB (hue, saturation, brightness) and RGB and allow us to modify these providing actual numbers - a slider doesn't give you enough precision. Please play with Photoshop's color picker to get a better idea. The color preview box should be bigger as well. Thanks.

  • Great feature Scott! Really excited about CSS and minification assistance.

    I agree with the thought that the greatest advantage you could give to CSS development would be to natively support something like LESS with intellisense, compilation, and reported errors.

    But this helps!

  • I agree it would be great to see support for .LESS and/or SCSS baked in.

  • I agree, with the increasing popularity of these frameworks .LESS and SCSS support would be great, thought it might make more sense to have that in separate extensions..

  • This lools great and will be of a lot of help. Now, if I could add my wishlist item: when using css3 properties, only show the proper name, not the browser specific ones, and then have the minifier engine automatically add the browser specific properties.

    That way our stylesheets will look cleaner, and we can forget about that issue. Obviously should be web.config settable to turn on or off.

  • Several people asked about adding LESS and SCSS support. We won't have those editors built-into VS in the next release, but we are working to enable them with a separate VS extension.

    Hope this helps,

    Scott

  • @Brian,

    >>>>> regarding CSS formating, is the layout configurable? I really dislike having the closing brace at the end of the first line. Rather, I strongly prefer to place it on the start of the next line.

    Yes - I believe this is also now supported in the new release.

    Hope this helps,

    Scott

  • That's really great. It is very difficult to remember color codes. Now one can easily choose color from color picker.

  • I kinda get the feeling that the mini (first stage) colour-picker popup isn't going to have much use in the real world. No designer is actually going to use any of those set colours, and if they need something bright for debug purposes, it's easier just to type 'red'.

    Everything else is good though! (although a lot of this is already provided by VS extensions...)

  • Give us a decent FTP engine, I will drop Expression web for ever.

  • About color picker, prefer devColor, because you can see what color with underline.

  • Soctt, I emailed you about this but it would be great if we could highlight and comment out lines just like the HTML and source code editor.

  • Ugh, i disagree. SASS should be a standard. Once you start using SASS there really is no comparison to CSS, it makes large, complex sites much much easier to manage. Its essential at this point. Not only are you not implementing all of the features of SASS, you are doing it your own way, when other methods and standards already exist.

    It amazes me that with all of the resources that MS has, an unruly band of Open Source Projects can run rings around them with new ideas. Used to be all "Developers, developers, developers" and true innovation. Now its "let Rails figure it out, and then lets use that."

  • Ugh, i disagree. SASS should be a standard. Once you start using SASS there really is no comparison to CSS, it makes large, complex sites much much easier to manage. Its essential at this point. Not only are you not implementing all of the features of SASS, you are doing it your own way, when other methods and standards already exist.

    It amazes me that with all of the resources that MS has, an unruly band of Open Source Projects can run rings around them with new ideas. Used to be all "Developers, developers, developers" and true innovation. Now its "let Rails figure it out, and then lets use that."

  • Hi Scott,

    I would like to throw my support to .Less/SASS and also Compass for the CSS editor.

    There are extensions forVS2010 available from Mindspace which are excellent but of course something integrated into VS would be much better.

  • You guys should definitely show the actual color on or near the assignment in some way as Resharper does. Most people can't look at hex and know what color it is.

  • I think it would be best to just ask Mads and get his Web Essentials as the default implementation. It would also be great to use R#'s color picker as that is pretty much exactly like Photoshop's (which is the best).

    Snippets is a great idea, but again, SASS/LESS would combat that anyway using mixins.

  • That's really great.

  • Another vote for LESS. Further, ideally the color picker and intellisense would integrate with defined color constants. Thus, if you have LESS variables defined for say @border-color, @menu-background, and @menu-text-color, then the color picker or intellisense might pop up that list of defined variables and show a preview of their corresponding colors. That would make use of defined LESS variables for consistent site colors much easier.

  • when came out this new relase of Vs ?

  • This looks great, I am really excited about this. I was trying to implement same in rich text editor code... is it possible?

    I have one suggestion, Although there are lot of free text editor available, but is it possible microsoft can plan to include something in future vs.net version. I believe lot of business requirement requires to use rich text editor. I will appreciate if MS can plan something on rich text editor :)

    Thank you again for nice post.

  • This will be great. We've been waiting for something like this for a long time.

  • This is like web essential tool on codeplex

  • Hopefully this will be as fast as possible because as of now the Mads's extensions are extremelly slow. And I agree that you should support LESS/SASS not reinvent the wheel once again with Microsoft only solution and leave developers waiting few months for another extensions to arrive. It always seems MS is falling behind, when the world's web community that uses non-MS tools is already using the latest stuff, Microsoft is one step behind - that mostly means a year or two in MS terms.

  • I am glad to see that CSS is getting some much-needed attention, because the CSS "standard" (recommendation) is sorely lacking, as is often the case. If Microsoft had invented SASS or .less, the world would demand that Microsoft "just obey the standards." Now that the open source world has taken the lead, Microsoft is told, "Disobey the standards exactly like the other guy is." It's a mad world. I concede that nobody is actually changing the CSS "standard", they're just augmenting it with frameworks, because it lacks so much. But, you get my point.

    I'm fine with Microsoft inventing their own CSS framework--so long as it's as good as anything else out there, or better. So, please either catch up quickly, or yes, embrace an existing framework like you did with jQuery.

  • Wow!! It was interesting information about visual studio new CSS features. I appreciate it. I always find such kind of creative tips related to web and application development. I will definitely catch up with your upcoming article. This one is great. Keep sharing such kind of articles in future.

Comments have been disabled for this content.