The CSS PI in CS4

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.

Get Started

Free TrialInspired by what you've read? Kick off your next project with Dreamweaver. It's part of Creative Cloud. Download a trial for free!
  • I started web design by hand coding, so when I first started using DW, it was the Properties panel that impressed me because all the basics were there in one easy to access place. Now I think the Properties panel can be so much more useful. There is too much wasted space (specifically the bottom half when text is selected). Why put only one or two buttons there and nothing else?
    I am curious why you decided to make two sections that I have to switch between, instead of just using the bottom half? I hate having to switch sections when that blank bottom half is staring at me. I would have used the top portion for HTML and the bottom half for CSS or whatever organization made sense. That would require less clicks on my part and be more user friendly by NOT hiding half of the options, such as the link field you mentioned.
    DW also needs some way to be able to apply multiple CSS classes to an specific element (without it adding an extra span). Currently that must be done in code.
    While I’m on the subject of CSS improvements, it would be nice if I could reorder css files in the CSS Styles panel. I know I can reorder styles in a file (love that), but I can’t reorder the files themselves.
    Thanks for listening,

  • Don – to my mind this is the single best new feature in Dreamweaver CS4. Thank you

Share your thoughts

Your email address will not be published. Required fields are marked *