Suggested improvements for CSS editor in Visual Web Developer and Expression Web

I’ve moved this blog to I won’t be updating this space any longer.
Please update your RSS subscriptions to

People who know me will know that I love CSS and that I can often be found with my head deep in a CSS file in Visual Web Developer (the web tools in Visual Studio). Recently I’ve been thinking about how Microsoft could make the support for editing CSS files directly in these tools more conducive to discovering features of CSS you don’t know about, improving productivity through better contextual awareness, and offering insight as to real world issues such as browser compatibilities.

So I’ve put together a series of mock-ups that illustrate some of the ideas I have for improving the support for CSS file editing:

  • Inline RGB colour picker
  • Ability to define colour swatches in XML comments including name, RGB and category
  • Inline colour swatch picker with $ keyboard shortcut that replaces name with hex RGB value on completion
  • Inline named colour picker with preview of named colour in pick list
  • Ability to choose browsers to warn of incompatibilities with when schema checking CSS
  • Green "squigglies" under CSS selectors and properties know to be unsupported or have issues in chosen warning browsers
  • ToolTips for CSS properties showing description and browser compatibility summary with hyperlinks to further information
  • ToolTips for CSS selectors showing description of what elements it will select, browser compatibility summary and specificity score with hyperlinks to further information on each
  • ToolTip preview of url resources (images) showing file size and image dimensions
  • ToolTip preview of font-family showing font source (TrueType, W3C, etc.) and font rendering preview
  • Support for automatic indenting of style declarations based on descendant or child selectors if they appear after each other

Hopefully somebody on the appropriate teams in Microsoft will here me 🙂


2 Comments on “Suggested improvements for CSS editor in Visual Web Developer and Expression Web”

  1. Paul says:

    Good suggestions Damo.
    I’d also like to see the ability to define class="class_that_doesnt_exist" and have the editor provide a smart tag (in the same way it does when you define an interface on a regular class) and it will automatically create the class in the default CSS file, or provide the list of files in the smart tag where to create that class, and then jump straight to that CSS class readify for editing.
    +2 for the Inline RGB colour picker
    Oh, and support for collapsing regions. So a single class definition represents a region, with perhaps extra "region" type id’s via comments if you want them.

  2. Damian says:

    Nice additions Glav, I especially like the idea of collapsing declarations and regions, that would rock. That combined with more advanced auto-indenting and formatting rules would really make a difference.