Getting shadowbox working with HTML5 (how to make it validate)

Update: As Dave mentions in the comments below, this change can prevent shadowbox from triggering in IE7. 

If you’ve been delving into the process of converting any of your pages or sites into HTML5, you’ve probably run into a few… headaches along the way.

If you’ve been using shadowbox (Web Archive) and trying to validate through the w3c’s validator, one of these headaches might look like this:

Shadowbox not validating as html5

The message is “Bad value shadowbox for attribute rel on element a: Keyword shadowbox is not registered.

What does this mean? Well, there are only certain things you’re technically allowed to put in a “rel” tag. For example, the following is okay:

<a href=”image.png” rel=”nofollow”>

“nofollow” is a valid “rel” attribute. You’ll find other valid attributes in the links provided by the W3C validator. Unfortunately, you won’t find things like lightbox, shadowbox, etc as valid rel attributes. And as you’re probably aware, the W3C’s validator can be rather picky.

The first thing I tried was looking for an alternative. Fancybox ended up being one of the few which appeared to use id’s and classes instead of rel, but for the life of me, I couldn’t get it working. Maybe it doesn’t recognize the new html5 doctype (it mentions it’s picky). Or maybe I just messed up trying to implement it (yeah yeah, probably this).

What I tried next, and what ended up working, was looking through shadowbox’s js file. I figured that “rel” must be mentioned in the file somewhere, and maybe it would be as simple as changing anything that says “rel” into “class“.

As it turned out, it was that easy.

There were 2 instances of “rel“, which I changed into “class“. After making the changes, saving the file, editing my html to change every rel=”shadowbox” into class=”shadowbox”, and re-validating through W3C, I got the following:

Success!
(the 1 warning was the W3C’s standard message about the HTML5 validator being experimental right now)

If you’re looking to do the same thing, it’s pretty easy. The shadowbox.js file is minified, so rather than hurting your eyes trying to find the right places to change, simply use your favorite editor to do a quick search (and replace) of “rel” to “class”. Save it, update your html, and you should be golden.

Of course, if you upgrade Shadowbox.js in the future, you’ll have to remember make the change to the new version.

Incidentally, whether it’s worth it to begin with is something you’ll have to decide on your own – being 100% compliant isn’t necessarily critical – I mean… I don’t forsee your site crashing browsers or even rendering wrong simply because you have rel attributes you technically shouldn’t. And heck, even Google’s main search page fails the html5 check (with 37 errors no less).

If that nice green validation bar makes you feel all warm and fuzzy though (I know it does for me!), hopefully the above instructions help you out.