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

Tweet

browsers-smIf 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 icon Internet Explorer versions 5.5, 6, 7, and 8
  • Firefox icon Firefox versions 1.0, 1.5, 2, 3, and 3.5
  • Safari icon Safari versions 1.3, 2, 3.1, and 4
  • Opera icon Opera 9.2, 9.5, and 10
  • Chrome icon 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:

Browser CSS compatibility table

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!

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://www.yellowshoe.com.au/ markbrown4

    Great work Ian, Paul and Tommy!

    In the interest of simplicity do you think it’s only worth showing the most recent versions with the exception of IE? I personally only bother testing the latest releases of the others because they upgrade frequently (perhaps with the exception of Safari).

    I’ll certainly make good use of this reference. :tup:

  • AndrewCooper

    Brilliant work guys! :) Glad it’s updated now. But erm, Google Chrome is now in version 4. Unless you started doing the updates to the reference a while ago and tested in Google Chrome 2 because 4 wasn’t out then?

    I was in Waterstones (huge bookstore company in the UK) today flicking through The CSS Reference and was about to buy it however, I didn’t because it wasn’t completely up to date anymore.

    I’d be more than happy (very pleased in fact) to buy a 2nd Edition of both the HTML Reference and the CSS Reference in hardback, if you guys were thinking of doing so, do it, please!

    Great work guys! :)

    Andrew Cooper

  • joshmiller

    Chrome v4?

  • http://www.impressivewebs.com Louistar

    This is great to see, however I have one beef with the update: Why not use single-letter codes to represent “Full”, “Partial”, “None”, or “Buggy” support? It seems so crammed and unreadable to see the word “Full” written in, well, full in every column.

    I think the colors along with a letter and a legend showing what each letter means would be much more readable than this crammed mess, and wouldn’t take anything away from the chart.

  • dvector

    @AndrewCooper Google Chrome 4