So, I’ve been toying with using HTML5 on my site. I’m thinking that, because
this is a spec built with backwards compatibility in mind, the transition is
going to be smooth, right? Well, mostly. It was pretty easy to make my site
conforming. I restructured my markup a little bit to throw in some of the new
bits like header and nav. Here’s what it looks like
(comments added):
<!doctype html> <!-- Love the new doctype --> <html lang='en'> <!-- Language codes are a good thing --> <!-- Noheadtag. Got a problem with that? --> <title>Jeff Cutsinger</title> <header> <h1>Jeff Cutsinger</h1> <div><a href="#navigation" id="nav-link" title="Skip to Navigation">N</a> </div> </header> <-- Yes, the navigation skip link is broken. This is a WIP, though --> <nav> <ul> <li><a href='news/'>Weblog</a></li> <li><a href='sitemap'>Site Map</a></li> <li><a href='search'>Search</a></li> </ul> </nav>
I’ve left bits out, but these are the important ones. As you may have noticed, I have a little script that makes the navigation pop up when you mouse over the nav link. It’s nice and unobtrusive in my opinion, but the changes broke it. In the meantime, I’m switching to use base2 because it’s the bomb. So I write:
var navLink = document.getElementById('nav-link');
var navigation = document.matchSingle('nav ul');
var ns = navigation.style;
Great. So it grabs the ul child of the nav element,
and screws with its style (actual manipulations not shown). But
Firebug comes back with an error. Turns out that
document.matchSingle('nav ul') is actually null. What?
After some digging, I see in Firebug that the DOM is not at all what I expected.
What‽ What‽ You’re flipping kidding me, right‽ You have got to
be kidding me! You’re telling me that the h1 is a sibling of
header‽
Alright. Crazy behavior from browsers is to be expected. Still, this doesn’t bode well for HTML5. It appears as though their new elements and backwards compatibility don’t mix. That is, you can’t reliably (or at least trivially) script HTML5 documents in existing browsers, except for Opera (and maybe Safari, which I can’t get to work on my machine). I really hope there’s something I’m missing.