Apply CSS Comment Hacks to Selections in Dreamweaver

Dreamweaver 8 offers a slew of new features directly targeted at helping you design your Web sites with CSS. The unified CSS panel allows you to select an element and see exactly what style rules are being applied to it — even from other styles. However, helpful CSS features are lurking about in the Code view as well.

When editing your code, be it HTML, CSS, Javascript, etc., you can select a block of code and then have Dreamweaver quickly wrap it in comments via the (right-click) contextual menu. This feature has been around for a couple of versions in Dreamweaver. However, Dreamweaver 8 includes some nice additions to this menu: CSS comments and comment hacks. This is really handy when troubleshooting your CSS or applying filters for certain browsers.

Follow these steps to get Dreamweaver to wrap your selection in CSS comments:

1. In either Code or Split View as well as the Code Inspector, select the bit of CSS you would like to comment out.
2. Now with your multi-button mouse, right-click on the selection. (Single-button mouse users can Control-click.)
3. In the contextual menu, choose Selection > Apply /* */ Comment. You can also use the Apply Comment button from the coding toolbar for applying basic comments.
4. If you want to apply a CSS hack to your selection, choose Selection > Apply Backslash-comment Hack or Selection > Apply Caio Hack from the contextual menu. The backslash-comment hack is useful for hiding certain styles from IE Mac. Where as the caio hack, named after Caio Chassot - the person that discovered it, is used for hiding styles from Netscape 4. To remove a comment, select the commented out code and choose Selection > Remove Comment… from the contextual menu.

The code view contextual menu makes it easy to apply comments to your CSS.

To learn more about CSS hacks and filters, be sure to check out these books:

CSS Mastery

CSS Hacks and Filters

Leave a Comment