»» Browser Support for CSS

CSS rules are always interpreted by Web browsers, just as the HTML pages those rules style are interpreted. The HTML and CSS standards give specifics on how browsers should display those rules—but they're not always followed. To design pages with CSS, you not only need to know the standards, as presented in the CSS specification, but also understand how browsers' quirks and flaws will affect your Web design results.

The Browser Problem

A Web browser is the essential Internet access tool of the early twenty-first century. Browsers are now indispensable to business, education, and personal communication. They create a common platform upon which Web-based applications can be built, with an HTML framework driving e-commerce, business-to-business transactions, Web-based learning, and online communities. Hundreds of thousands of pages of new information are added to the Web each day. Cascading Style Sheets play a crucial role in this communications medium by not only providing a pleasant visual layer on the surface of these Web applications, but also by potentially reshaping the entire user experience.

So what's the problem? In short: Web browsers have been inconsistent in their support for CSS.

There are many reasons for this. Some early browsers, such as Netscape 3, were created before the CSS specification was published. Some browsers jumped the gun. Microsoft is notorious for rushing ahead and using draft specifications of standards in their browsers, and then the specifications get changed. And sadly, some browsers are just plain bad. They may seem to function normally, but when it comes to consistent and standardized support for CSS, they fall very short. The good news is that the problem is being solved. Slowly but surely, each new major browser release is better than the last, and you can get pretty decent CSS implementations from Firefox, Opera, Safari, and other browsers. When a browser encounters anything—from CSS rules to HTML, JavaScript to Flash multimedia—it has several choices as to what it can do. If the browser has been programmed to understand the thing it has encountered, it attempts to display it according to the specification. If it has no idea what it has come across, it can ignore it. Both these options can be considered "doing the right thing." Or the browser can do the wrong thing. It can get confused; it can display in some nonstandard way; it can even crash, although that's rare. Doing any of these wrong things, of course, is the least desirable and is at the root of our problem. Cascading Style Sheets were designed from the start to degrade gracefully. This means that if your CSS rules aren't recognized for some reason, your page is still usable and the content accessible. Because presentation is separated from content, the content should be able to stand on its own, albeit not as beautifully, after the presentation is removed. At least, that's the theory. In practice it's not nearly as easy as that. To be an effective CSS author, you need to know not only what works in any given browser—or in most or all of them—but also what happens when it doesn't work. Is it as simple as your style not being applied correctly and a bit of decoration being lost, or is it as serious as your entire layout being disrupted and content being lost?

Compliance and Lack

Thereof You need to understand what happens in each case of browser failure to know how to approach each browser. When a browser fails to correctly understand and apply a CSS rule, the browser may just ignore the rule and your design will be fine. Or, because of a browser quirk or bug, it may ignore the rule and your page could become unreadable. As a designer, you need to weigh each style rule carefully and know what effects will result if browsers don't understand and apply it. In some cases, you may want to use CSS properties that aren't well supported; you may figure that you don't mind some users missing out on a special styling if it improves the site for those users with more advanced browsers. In other cases, you may decide you can't take that chance, and you'll have to make a choice whether to support the broken browsers with workarounds or ignore that audience. For example, consider a CSS rule that makes the first letter of each section stand out large in a stylized font. This may just be simple decoration, and if the font is normal sized in some browsers, so be it; it may not affect at all the way your page functions. In other situations, you may be forced to either abandon certain types of style rules that are perfectly valid and useful simply because some major browsers don't support them. An alternative to this approach is to make special modifications, called browser hacks, which allow your style sheets to work despite browser problems. The most common of these is called a filter; a filter prevents certain browsers from reading specific CSS rules that might cause them problems. You'll learn more about browser hacks and filters in Hour 24, "Troubleshooting and Browser Hacks."

To understand how browsers deal with CSS, I've divided them into four categories: ancient browsers, which pre-date the CSS specification and thus ignore it completely; broken browsers, which try to provide CSS functionality but fail horribly in some manner; quirky browsers, which have generally decent CSS support but a number of "gotchas" where they don't quite measure up; and compliant browsers, which do a good job of presenting CSS as it's meant to be. Each category of browsers treats style sheets differently, and it's important to understand what those differences are and how you can design for those browsers.