Although CSS 2.1 has been around for years, it's only now, with the introduction of Internet Explorer 8, that all major browsers properly handle this version of CSS. Of course, the Web never sleeps, and the World Wide Web Consortium is busy working on the next CSS standard—CSS 3 (see Figure 16-1). Most browser developers have already started to include bits and pieces of this yet-to-be finished edition of CSS.
If you like to live on the edge and explore the latest new thing, this chapter is for you. Just be ready to accept the fact that some CSS 3 properties don't yet work in all browsers. This chapter shows you how to use the more widely accepted properties and, when possible, shows you workarounds for the browsers that don't yet understand them.
Above all, remember this: Web pages don't have to look the same in every browser. Just make sure that your websites work for all of your site's visitors, whether they use Internet Explorer 6 or Firefox 3.5. If a page is unreadable because of some difference in how a web browser displays it—for example, the horrible float drop discussed on Preventing Float Drops—that's a problem you need to fix.
That said, it's perfectly fine to enhance the appearance of a page using properties that work in some browsers but not others. For example, the text-shadow property (coming up on Text Shadow) lets you give text a drop shadow. It works in Safari, Opera 9.5, Firefox 3.5, and Chrome but not in any version of IE. Adding a subtle drop shadow can improve the appearance of headlines in those browsers, but it doesn't ruin the experience for Internet Explorer users. So feel free to explore the following CSS properties, even if not everyone will get to enjoy them.
Figure 16-1. The World Wide Web Consortium provides the most up-to-date information on CSS at www.w3.org/Style/CSS/ current-work. Here you can read about all of the different CSS 3 modules and see how far along they are in the approval process.
CSS has matured substantially since its 1996 introduction. It's become the primary web-design tool, and with designers clamoring to make ever more stunning websites, each version of CSS has more—and more complex—properties than the one before. With CSS 3, the World Wide Web Consortium has broken CSS up into independent modules. Each module describes a specific new set of CSS properties. Some modules are straightforward, like CSS Transitions (for animating a transition between two states such as making text glow when you mouse over a link) and CSS Web Fonts (instructions for different font properties), while some modules are more obscure, like CSS Math or CSS Namespaces. The goal of the module system is to let CSS grow bit by bit, without making everyone wait for one giant set of instructions to be completed. Each module progresses on its own, and browser vendors are free to adopt a module's rules as soon as it's ready.
Although none of the CSS 3 modules is complete, some of the most visually exciting bits of CSS 3 have made their way into current browsers (even Internet Explorer, in some cases). The rest of this chapter walks you through you a bunch of them.
Tip
Beside the W3C, www.css3.info also offers fairly up-to-date information on the state of CSS 3.