CSS: The Missing Manual, 2nd Edition

Chapter 16. CSS 3: CSS on the Edge

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 ...