Monday, March 17, 2008

Manage CSS in VS 2008

VS 2008 supports a new tool window inside the IDE called "Manage Styles".  This shows all of the CSS stylesheets, and their corresponding rules, for the page you are currently editing.  It can be used both when you are in design-view, as well as when you are in source view on a page.

Click View > Manage Styles

clip_image001[5]

A circle around a CSS rule in the manage styles window indicates that particular rule is in use within the current document.  Using the mouse to hover over the rule allows you to quickly see the CSS rule values:

clip_image002

The tool window provides top level nodes for style block(s) in the current page and external style sheet in cascading order.  Inline styles will not be displayed in this window, since inline styles are not “manageable”. Tool window will also list the @import directives.

The icons are used to differentiate the various types of styles as shown below.

clip_image003Elements

clip_image004Classes

clip_image005IDs

clip_image006Style in use (color applies as above)

You can then either right-click on a CSS rule and select "Modify Style" to bring up a graphical CSS rules editor, or you can double click on the rule in the manage styles window to automatically open the stylesheet file and jump immediately to the CSS source definition to edit (with full intellisense):

clip_image007

Click View > CSS Properties

One of the other cool new CSS features that is also supported in both design and source view is the new CSS Properties Window:

clip_image008

You can click on the individual values to see where in the CSS precedence hierarchy this value was inherited from or overridden.  In the example below you can see that the final color for the current element that my cursor is on is a dark brown color.  If I select this final color value, the CSS properties window will draw a blue box in the applied-rules list above indicating that this setting is set in the "singlecontent h3" rule:

clip_image009

If you click on the lighter brown color setting that this rule overrode (and which has the red strike-thru), you can see that it originated with the page's HTML body CSS rule (notice how the body rule below is selected in the applied rules list when you select the overridden value below):

clip_image010

No comments: