Browser support of CSS 1 and CSS 2 is fairly widespread now. There are a few glitches here and there, but in general, if you're planning a CSS Web page, using these specifications will work fairly well. Where you'll get into trouble is with CSS 3. While some selectors are very well supported, others have little or no support in Web browsers.
IE 5 is the first version of IE that reliably supports nearly all CSS 1 properties and a good number of CSS 2 properties. If a large number of your readers use IE 5, then you can do some CSS positioning, but the box model is incorrect and you'll need to test CSS 3 and 2 selectors carefully when you use them.
Microsoft has been opposed to generated content. This may be changing with IE 8 (beta), but it's hard to tell until that version of the browser is formally released.
Internet Explorer 6
IE 6 is when CSS became fairly well supported in the Internet Explorer line. While there are still a number of big problems, primarily with box model support, if your customers use IE 6, you'll be able to use CSS for positioning and styling your pages. Just be sure to test extensively. And since IE 6 is still not standards compliant, it's best to design for Firefox first. Once you've got it looking fine in a standards compliant browser, you can then use selectors that IE 6 or 5 doesn't support to hide styles from these browsers. A good selector for this purpose is a child selector.
Internet Explorer 7
With IE 7, Microsoft worked very hard to improve their CSS 2.1 compliance. Many of the hacks that were used to hide CSS from IE 6 will no longer work, but they are also no longer needed. Some nice things that were added include:
- :hover on all properties, not just a
- Min/max width/height support
- Fixed positioning support
Firefox 1 and 2
Firefox 1 and 2 are very standards compliant. They have good support of CSS 2 selectors and are a great browser to design for because things generally act as they are expected to act. One caveat, however, you need to be sure to declare a DOCTYPE on your pages. If you do not, these browsers will go into quirks mode and standards compliance is less complete there.
Firefox 3 (beta) supports a lot of the CSS 3 selectors and properties. If you want to use CSS 3, then this is a good browser to test with.
Safari 1 and 2
Safari's standards support is nearly identical to Firefox's support. This is a great Macintosh browser, and if you need to design for it, you won't go wrong using standard CSS 1 and 2 selectors and properties.
Apple made Safari 3 for both Macintosh and Windows computers. And with that release you might have seen more people begin to use it on your website. Safari 3 has good standards support, with some CSS 3 support as well.
Opera is another good standards-compliant browser. It's got great CSS 2 support, but it's CSS 3 support is a bit spotty.
This Linux browser is a lot like Opera in it's support of CSS 2. It has less support of CSS 3 properties and selectors.
If you need to design for PDAs and cell phones, you need to design a very minimalist site. The problem with these browsers is that they are all over the map in terms of CSS support. Some use Opera or Safari and have CSS support of those browsers. While others use browsers built or commissioned by the phone company and have erratic or non-existant CSS support. If you need to design for wireless devices like cell phones or PDAs, you should assume that CSS isn't available.
If you write HTML email, you have a similar problem to the cell phone developers. Email clients are all over the map in their support of HTML and CSS. Most of them don't support CSS 2 or only slightly. If they do have CSS support it's nearly always only as inline styles, rather than internal style sheets or external style sheets. When you write HTML email, it's important to test as much as possible before you send it out to your customer base.