Managing the complexity of interwoven HTML and JavaScript can be a demanding task for designers.  One way Blend supports designers is by providing a visual indication in the CSS Properties and HTML Attributes panes when JavaScript values have been set or have overwritten values assigned in markup.

This works well for the majority of attributes and properties that take a single value.  However, the class attribute can be assigned a list of space-separated class names.  In JavaScript, the list of class names can be appended to, prepended to, overwritten, deleted, or otherwise arbitrarily modified.  Sometimes, multiple JavaScript functions will modify the class attribute of the same element in different ways.

Understanding the interactions between HTML markup and JavaScript is crucial during development and can help with debugging when things aren’t displaying as expected.

Enter the Blend Class Attribute Editor for HTML

Blend includes a nifty value editor specifically designed for the HTML class attribute.  You can use it to add, edit, and remove class names for selected elements.  More importantly, you can see a visual indicator for each class name that indicates its state.

Class State Indicators

The class attribute editor displays three possible states for each class

State 1: Class Name Added in Markup
The first is the markup state.  It appears as the class name with a minus sign (i.e., the Delete button) to the right.  This indicates one of three conditions:

• The class name exists in HTML markup and JavaScript has not modified the class attribute for the selected elements.
• The class name exists in HTML markup and JavaScript modified the value of the class attribute, but also added this particular class name.
• The class name was added during design time after JavaScript updated the class attribute, and JavaScript has not since modified the class attribute (i.e., you have not invoked a Refresh).

State 2: Class Name Added by JavaScript

The second state is denoted by a lightning bolt following the class name.  This indicates the class name was added by JavaScript and does not appear in HTML markup.

State 3: Class Name Removed by JavaScript

The third state is denoted with the class name struck through in addition to a lightning bolt.  This indicates the associated class name exists in HTML markup, but JavaScript modified the class attribute and deleted this class from the element.

If any of the class names are added or removed by JavaScript, the Property Marker (the little square next to the plus button at the top of the editor) and the border around the editor will be colored cyan.

Adding, Editing, and Removing Class Names

The plus button at the top is the Add button.  Clicking the Add button adds a new class with a default name to the editor.

You can edit individual class names by double-clicking them.

Deleting them is just as easy.  Click the minus button and the corresponding class name is removed.

Even if a class is added by JavaScript, you can remove it using the class editor.  But remember, refreshing the artboard will run your JavaScript again and reset the class names.

Power User Tips

Power User Tip #1: You can add multiple class names at once by putting a space between each name.

Power-user tip #2: Clicking the Property Marker for the class editor will bring up the option to “Create Style Rule from Element Class”.  This option has a fly out menu to let you create a new style rule targeting the selected class name.  Go for it, power users!

Let us know what you think about Blend’s new class attribute editor—feel free to leave comments and questions below.

Thanks,

Kirk Schloegel and Brian Hilstrom