Browser Support for CSS | Page 3
[previous] [next]
Browser Support for CSS
Compliant Browsers
A compliant browser is one that follows the CSS and HTML specifications to the letter. Well, that's not really true—as of early 2006, no browser can legitimately claim 100% standards compliance. However, there are browsers that get very close, to the extent that they can be treated as basically compliant. This is the category we'll call compliant browsers, although if you want to be pedantic, you can think of this as the "almost compliant" group instead.
When designing for compliant browsers, you don't have to do anything particularly special other than follow the CSS 2.1 specification. The selectors and properties you'll learn in later chapters of this book will work as described; text styling and even complex layouts don't present any major obstacles. You won't need to use filters or other browser hacks to deal with compliant browsers.
However, you need to keep in mind that not all browsers out there are compliant. The quirky browsers, in particular, are still around and may require special attention, even if the compliant browsers are going to be well behaved.
The following are generally compliant browsers:
|
Web Standards and the Acid2 Test
As you learned in Hour 1, "Understanding CSS," the CSS language is defined by the Cascading Style Sheets Level 1 and Level 2 recommendations from the World Wide Web Consortium, and updated by CSS 2.1. These recommendations function as standards for the CSS language.
Standards are a good thing for developers; the more the browsers support the standards, the easier it is for us to create expressive and attractive designs in CSS and know they'll work reliably. Increased support from standards, the browser makers, the Web developer community, and the Web software manufacturers will only make our jobs easier.
One group of Web designers decided to take their support for standards public and founded the Web Standards Project to encourage browser makers to adhere closely to the CSS recommendations and other Web standards. In addition to their advocacy work, the Web Standards Project site contains useful FAQs and links on standards support. Their URL is https://www.webstandards.org/.
In 2005, the Web Standards Project developed the Acid2 test. Acid2 is a Web page created with some rather complex CSS rules that hit key parts of the CSS and HTML specifications. If a browser successfully interprets and displays the CSS rules according to the standards, a happy face is displayed. Figure 3.1 is the reference picture showing how a compliant browser should display Acid2.
 Figure 3.1: How the Acid2 test is supposed to look, shown in Safari 2.  Figure 3.2 Internet Explorer 6 quite clearly fails the Acid2 test. |
Figure 3.2, on the other hand, is an example of a failed test. Internet Explorer 6 doesn't display the happy face according to the specifications.
As of early 2006, four browsers had passed the Acid2 test; in order: Safari, iCab, Konqueror, and Opera. Acid2 isn't the ultimate test of CSS support—it's possible to pass Acid2 and still have serious CSS bugs or quirks—but it is an important benchmark for measuring progress toward standards compliance.
Browser Compatibility Charts
A browser compatibility chart is an invaluable resource for anyone doing serious CSS work. What is it? A compatibility chart lists every CSS property in a matrix, cross-referenced with a number of different browsers (including various version numbers and platforms). For example, if you want to know whether version 5.5 of the Internet Explorer browser supports the text-transform property, you can consult a compatibility chart. For each property you look up, you'll see whether or not it's supported by the browser, and if there are any special notes or known bugs in the implementation.
There are several sources of CSS browser compatibility charts; one that's particularly nice to use is David Hammond's chart at https://www.webdevout.net/. Bookmark that site and refer to it when testing your CSS-based designs. Brian Wilson's Index DOT css site at https://www.blooberry.com/indexdot/css/ hasn't been updated for several years, but it's still useful if you need to dig back through history for information on older browsers.
[previous] [next]
URL:
Find a programming school near you