Massive SitePoint Reference Update Completed: It’ll Save Your Sanity

If you’ve been browsing the SitePoint HTML and CSS References lately, you may have noticed that the compatibility tables have been updated!

Ian Lloyd, Paul O’Brien, and Tommy Olsson have been hard at work testing HTML elements and CSS properties with the latest crop of browsers, as well as taking in feedback from reference users, and updating the information where appropriate.

The CSS and HTML References now show compatibility information for the following browsers:

• Internet Explorer versions 5.5, 6, 7, and 8
• Firefox versions 1.0, 1.5, 2, 3, and 3.5
• Safari versions 1.3, 2, 3.1, and 4
• Opera 9.2, 9.5, and 10
• Chrome 2

(Icons courtesy of Browser Version icons)

What I like the most about the SitePoint Reference is the Compatibility Notes section, because it helps you make informed decisions and prevents you from falling into compatibility testing traps; the kind of situation that has you tearing your hair out, because you’ve no idea why your CSS works in every browser but one.

For example, we can now see from the Reference that there’s reasonable browser support for CSS3 attribute selectors:

So, pretend you’re working on a big project that’ll give you much fame and fortune. Deciding on whether or not to rely on CSS3 attribute selectors in your project is now a little easier. You can see that IE6 offers no support at all, so you can choose whether you’ll support that browser. If you decide to forge ahead with using CSS3 attribute selectors, you’re forewarned that you may have a problem with IE7 and 8. You read the Compatibility Notes section and this is what you find.

In IE8, if you’re trying to match a td or th element by the rowspan or colspan attributes, you’ll end up selecting all td or th elements. It’s an edge case and probably won’t affect this project, but it’s good to know.

However, in IE7, if you’re trying to target a label element with a for attribute value, you’ll have a problem. If you’re attempting to select a label element with the for value "name", the selector label[for="name"] will fail in IE7; you’ll need to use label[htmlFor="name"] instead.

As it turns out, that’s exactly how you were going to style your field labels in the client-side field validation library you’re deploying. Your client has a significant number of IE7 users and that little tip just saved you half a day of frustration.

Thanks SitePoint CSS Reference — you’re the best!