FOTD 24: Dreamweaver 8 – CSS Improvements

Dreamweaver 8 recieved a lot of updates to the way it authors and displays CSS, and we’ve already looked at how the Unified CSS panel consolidates workflow on the authoring side. Let’s take a peek today at how the rendering has changed- and first, some new visualization features that will make authoring much easier overall.


First up, you can now visualize your DIV-based layouts very effectively in Dreamweaver 8. In DWMX 2004, I got very comfortable using the Firefox “Web Developer’s Extension” to help show me how my DIVs interacted with one another, but the DIV Visualization feature of Dreamweaver 8 makes that an option, not a necessity.There are several new options in both the document toolbar and ‘View > Visual Aids’ menu that you’ll want to note (in addition to the old-favorite Table visualization features and Invisible Elements “toggle switch”):

view_menu.jpg
  • CSS Layout Outlines
    Turns on simple outlines of your page elements.

  • CSS Layout Box Model
    Turns on outlines/visualization of the box model properties for selected elements in your page.
  • CSS Layout Backgrounds
    Turns on a ‘colored’ view of your page elements, helping visualize overlaps/collisions/etc.

If you’ve ever wondered whether margins, borders or padding (or all three) were conflicting between adjoining elements and confounding your design sense, the CSS Layout Box Model mode will help dramatically in pinpointing problem areas in your layouts. Let’s start with a generic CSS layout and see how these visualization features will help you see what’s going on in your page:

basic_layout.jpg
Initial CSS layout

Now the view above has “CSS Layout Outlines” turned on, to get an idea of the boundaries of each (not just the border styles you’ve set – this is most noticeable above in the left-hand DIV). But you’d like to see exactly how your defined padding and border attributes play into the visual layout. Simply turn on the “CSS Layout Box Model” option, and you’ll see a visual representation of the padding area within the DIV in question (diagonal ‘crosshatched’ lines), as well as the margin and border attributes:

boxmodel_layout_2.jpg
CSS Layout Box Model view option

As you can see, the ‘Heading 2′ DIV has a 200 pixel left margin that helps ‘force’ it right on the page (note the horizontal blue line stretching to the left-hand side of the layout), so that the left-hand column can stick cleanly to the left. Although my screen-capture utility won’t let me snap them- hovering over any of the properties of your selected element will show their values – hovering over the left-margin will show a tooltip noting that it’s set to 200px, hovering over the padding area will show that it’s set to 1em (16px), hovering over the main area of the DIV will show the basic style information for the entire DIV itself. Heck of a lot better than jumping back and forth between your (X)HTML document and your CSS document and scrolling around. Very nice.This feature alone has been a monstrous timesaver for me- toggling it on/off as I go helps dramatically in seeing the relationship between my page regions/DIVs and troubleshooting.And finally, if the visual feedback from the Box Model view option doesn’t give you enough of a distinction between the elements on your page, you can turn on the final “CSS Layout Backgrounds” view mode, and get this rather colorful display, helping to highlight exactly where your page elements overlap, push each other in various directions, collide, explode, etc. ;-)

background_layout.jpg
CSS Layout Backgrounds view mode

For a quick scan of how your page elements interact, this mode is incredibly handy – although not exactly the option you’ll want enabled when proofing your work with clients!I also wanted to highlight some techie under-the-hood improvements and fixes to CSS rendering in Design View. Note that this comes from someone (myself) who hasn’t used Design View much in the past in favor of Code view, but will likely be using the visual tools more in the near future given all these new improvements. ;)

  • border-style
    As opposed to only rendering solid border-styles, all border styles are now rendered (none, hidden, dotted, dashed, solid, groove, ridge, inset and outset).

  • Improved positioning
    Although CSS positioning of elements (text-align, float, position, margin, etc.) have mostly been supported in DWMX 2004, there were certain cases where rendering would not work as expected with certain combinations and nesting scenarios. This has been addressed in DW 8.
  • Support for the overflow property
    Overflows are now rendered more accurately to your design intent, with a contextual menu item – “Full Element View” available so that you can toggle on/off the full view of the element in Design view for editing. Cool!
  • first-letter and first-line pseudo elements
    Now rendered in Design View (these are very popular design properties, after all!).
  • Inline Box support
    Dreamweaver MX 2004 only recognized a subset of inline tags. Dreamweaver 8 now recognizes all standard HTML text-formatting tags.
  • Improved Horizontal Rule rendering
    HR color, background color/image, and margin/border/padding attributes are now rendered correctly.
  • Overall Positioning improvements
    A literal snowstorm of issues related to alignment, floating, list rendering, margins, relative/absolute positioning and flow have been improved. If you’ve witnessed these in DWMX 2004, you’ll be pleased with the updates in DW 8. ;-)
  • Form Elements
    Support for margin/border/padding, form background and fonts, and a lot more were implemented in DW 8. If you were ever annoyed by the white backgrounds behind form elements, take a deep breath and let it go… ;-)

To be honest, that’s just a few highlights of the rendering improvements- and there’s a lot more (including more detail on the points above) that you’ll be interested. But in the interest of posting this in a timely fashion, I’ll simply close this thought by saying Design View is much, much more reliable in Dreamweaver 8.The combination of small CSS rendering updates in this FOTD- in combination with the improved authoring experience the Unified CSS Panel provides – should give you a good idea of how your CSS workflow will continue to get better and smoother with Dreamweaver 8. I think you’ll find these updates very welcome indeed. ;-)Have a great weekend- and I’ll see you again on Monday!