The DOM, Advanced CSS, and Browser Compatibility

In the March meeting that just happened, Tom did a good job of quickly covering the DOM, explaining that every browser implements the DOM differently, and then telling us that we shouldn't have to worry about that because of libraries like jQuery. jQuery handles all the incompatibilities behind the scenes and gives you a single method to call all the time. It's great for developers - it just works. If you ever do research on plain DOM methods, you'll quickly find pages talking about which browsers support those methods and how to get the same effect in all browsers.

Anyway, that reminded me of a few links I had seen in the past that are relevant to DOM and browser compatibility.

First is a talk by John Resig, creator of jQuery, about how much of a mess the DOM really is. It's a fairly technical talk, so you really only need to watch if you want to see what the jQuery guys go through to ensure compatibility. You can see all the work they have to do to make jQuery so easy to use. If there's one thing I took away from this talk, though, it's the way they choose a set of browsers to support at the start of development and supported those browsers 100%. Most of the sites I've done now have explicit support for Firefox 3, IE 7, Opera 9, Chrome 1 and Safari 3 Windows.
John Resig: "The DOM Is a Mess"

Next, and probably more importantly, is an amazing compatibility table for CSS and DOM functions across different browsers. On the main page, you'll see general categories - CSS 2 & 3, DOM core, DOM for HTML, CSS and Events, and the CSS Object Model (mostly used to find a user's cursor position). You can click into these categories for greater detail.
Compatibility Master Table at quirksmode.org

Again, the DOM pages probably aren't as important to you because you use jQuery, but you might still be interested to see just how broken the DOM is. Almost every method is supported by some browsers and not others. (And it's not just IE with problems either! All browsers get some of the blame here.)

---

I personally found the CSS compatibility more interesting than the DOM bits. I've always shied away from using advanced CSS selectors because of compatibility worries, but the page here shows that (except for IE 5.5 and 6), all modern browsers have good support for these selectors. Probably selectors you've never heard of, or at least never used.
CSS contents and browser compatibility

For example, have you ever used Javascript or a small span to style the first letter of a paragraph? Then you'll be happy to know about the :first-letter and :first-line psuedo-selectors. (Note that these only work on block-level elements like div, p and blockquote. They won't work on a, span, or other inline tags.)
p:first-letter { font-size: 2.5em; }

Or maybe you want to give a certain border to top-level divs, but not to divs that are inside of them. In the past, I would have set a border rule for "div" and then a second rule for "div div" to unset the previous rule. So messy. The > selector lets you select elements that are direct children of an element, while ignoring deeply nested children:
body > div { border: 8px #ccc solid; }

Let's say you want a quick style rule that marks all pdf links so readers know what they're clicking through to. This line finds all anchor links with href attributes that end in .pdf and appends a text label after the link:
a[href$='.pdf']:after { content:' (pdf)'; }

One last example. Let's say you want all your spans to be orange on a purple background, bold, underlined, comic sans - the works. But you don't want spans with the "image-caption" class to have this style. You could add a new style for ".image-caption" to unset all of those styles, or you could use the :not() pseudo-selector (familiar to jQuery users) to exclude it from the beginning.

Unfortunately, many of these don't work in any version of Internet Explorer. Like Javascript, advanced CSS should be used only to enhance a page. If anything crucial is in these style rules, I guarantee some of your users won't see it. Still, I'd recommend looking through at least the CSS page there. Even if you've been using CSS for years, you should find some new techniques to work with.