Summary
Browser support is the key issue to understanding how to use Cascading Style Sheets effectively. Older browsers ignore CSS, compliant browsers support CSS, and other browsers either provide limited or broken support for the standards. Knowing how to deal with the different types of browsers makes your style sheets more effective across a variety of platforms and browser versions.
Internet Explorer for Windows version 6, Internet Explorer for Macintosh version 5, Netscape 6, Opera for Windows 6, and Opera for Macintosh 5 are the latest available browser versions at the time of writing, and they all have impressive support for CSS standards that continues to increase with each new release. Other browsers, such as iCab, WebTV, Konqueror, and Lynx, offer varying support for the CSS specifications.
Browser Support Report Card
The Browser Support Record Card will appear in each subsequent hour, and provides a measure of browser support for each particular CSS feature mentioned earlier in the hour. The following report card is based on the CSS properties you've learned so far, in this and previous hours:
CSS Feature |
Grade |
Notes |
Tag names as selectors |
A |
|
The color property |
A |
|
The background-color property |
A |
|
The font-size property |
A |
|
The font-family property |
A |
|
Combining selectors |
A |
|
Combining declarations |
A |
|
The <link> tag in HTML |
A |
|
How to Read the Grades
As you can see, all of the CSS features on this report card, which were introduced in Hour 2, "Getting Started with CSS," get a grade of A. (This was intentional; I didn't want to introduce problematic CSS until you'd learned more about the browsers, so Hour 2's properties were simple and safe.)
The grades are based on the American public school system's letter grades and can include plusses or minuses to indicate fractionally higher or lower rankings. The general meaning of each grade is as follows:
Grade |
Meaning |
A |
You can safely use this feature as described in the hour without fear of browser errors. |
B |
A workaround is required for some browsers, but once applied, the feature works as described in the hour. |
C |
A partial workaround exists, but it's not possible to get the result described inthe hour in all browsers, even using the workaround. |
D |
Browser support exists, but is so poor that you should never rely on this working, and there's no easy way to make this perform as desired. |
F |
The implementation of this feature is nonexistent or extremely poorly done, and you shouldn't even try to use it. |
Browser support grades are based in part on the support of the browsers for the particular CSS feature, but they are also based on the subjective measure of the cost of failure for each property. The more browsers that don't support a feature, the lower the grade it receives.