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