Dreamweaver CS6: The Missing Manual

Using CSS3

The web continually evolves—not only do new websites appear (Facebook, YouTube, Twitter), but the fundamental technologies used to build websites change and grow. Web designers used to use HTML tables to lay out pages; now we use CSS. The web design world today is abuzz with the next incarnation of the CSS standard: CSS3. CSS3 adds amazing new design effects to websites, such as drop shadows for text or page elements, animated effects, rounded corners on images, gradient backgrounds, and more (see a list of the most popular CSS3 properties on Common CSS3 Properties).

But there are drawbacks to CSS3. First, it’s a work in progress; the W3C is still hammering out the list of CSS3 properties and how they work. As a result, browser support for CSS3 varies significantly. Internet Explorer 6 was created long before CSS3, and even Internet Explorer 9 doesn’t understand many aspects of the standard. Some browsers don’t support any of the properties proposed in CSS3. In addition, to get some CSS3 properties to work in the browsers that do support them, you have to use special “browser vendor prefixes.” For example, the box-shadow property adds a drop shadow to page elements (like a sidebar, div, or headline). You’d use this CSS3 code to add a box shadow:

box-shadow: 2px 3px 4px #000;

But to get a box shadow in Safari and Chrome browsers, you have to write that same code like this:

-webkit-box-shadow: 2px 3px 4px #000;

And for Firefox, you’d write this:

-moz-box-shadow: 2px 3px 4px #000; ...