Finding the CSS3 possibilities in Dreamweaver 5.5

A brilliant examples of interface design that Dreamweaver designers use with some regularity is the CSS rule definition dialog window in Dreamweaver. This window has been approximately the same since the days of Macromedia when it was first instituted.

css rule definition dialog box

For many past versions of Dreamweaver, this dialog box covered the full range of what you could do to a generate a selector and write CSS for it. Since CSS3, it’s starting to show signs of age. Some of the new possibilities with CSS3 aren’t available in the options in the rule definition window.

That doesn’t mean Dreamweaver doesn’t have them. You just need to know where to find them.

Logically enough, the place to look is the CSS Panel. In the lower left corner of the CSS Panel, there are icons that allow you to look at CSS properties using either list view or category view. Here’s an example for a rule that uses border-radius to create rounded corners. Look at list view in the properties pane.

CSS panel list view

In list view, you see the list of potential properties that could be applied. The view shown is at the beginning of the alphabet. Those properties that have rule declarations assigned are indicated with information showing the value assigned. List view includes vendor prefix options listed in alphabetical order.

The other icon at the lower left of the CSS panel that will show you CSS3 possibilities is Category View. Here’s a look at the same rule with category view showing in the properties pane.

CSS panel category view

The categories are revealed using an accordion style slider to hide or show options. I have the Border category revealed here. Among other things, you see the CSS3 border-radius property. In Category view, Mozilla, Opera, Webkit, and Microsoft have individual category sections where you can find vendor prefix options. Scroll down to find the categories for various vendors to create rules for border-radius (or other properties) with vendor prefixes.

 

2 thoughts on “Finding the CSS3 possibilities in Dreamweaver 5.5

  1. Hi Virginia,

    I’m a web designer that just started using Dreamweaver. Sometimes it’s hard to find where all the css properties are located, but article actually helped me a lot.

    Thanks

Leave a Reply