In this, the latest post on new features of CS4, I will be talking about the CSS Property Inspector (CSS PI).
With CS4 we continue to improve (hopefully) the CSS editing experience. We continually try to meet the needs of design pros, who know the code and want to be efficient, and those that are learning CSS, and need to understand what they are creating.
The new CSS PI is a good step towards that goal.
First, why the CSS PI? A couple of reasons:
We, and you, have been pained by ‘style1,style2′ for a few releases now. We knew we had to get rid of that. (For those of you that don’t know, those are the names of DW auto-generated classes.)
We wanted to make the distinction between editing the HTML and editing CSS properties. In the old PI, those properties were mashed together (Format wrote HTML, Size wrote CSS).
So now the text PI has 2 buttons on the far left. The HTML button shows the properties that write or change HTML: Link, Class, Format, etc.
The CSS button shows those properties that will change CSS properties: Font, Size, etc.
But in the past, DW would blindly make that change and fester the page with style1, style2. Not only that, it didn’t educate the user on what was being created on the code level.
So the PI now prompts for and helps to determine intent. If you set a Size property, DW will open a dialog that prompts for a class name. It assumes a class in this instance, but in the dialog, you have an opportunity to set an ID or contextual selector.
The Size property is added to this newly formed class and that class name shows up in the Targeted Rule field. No more style1. Hopefully, this will help new users learn about classes, IDs, CSS properties and how to properly harness the abilities of CSS.
There are many ways to design features like this and we hope we have struck a good balance between experienced user efficiency and new user education.
And yes, even we panicked a little bit when we looked at the PI and didn’t see the Link field. Hopefully the change is workflow is worth it.
Let us know either way.
The CSS PI in CS4