Going with HTML5

I decided to make this Wordpress theme in HTML5 now rather than later to learn the new standard. I can now move all my personal development over to HTML5 and have them be (relatively) future proof. The HTML5 spec is not, of course, finalized, so I may have to make some changes here and there. I also have a few unanswered questions about the best use of tags such as article, section, nav and figure. I have made sure I only use these tags for semantic purposes (take a look at the HTML5 outline for this page), but some questions remain, such as: should I mark up every list of links with the nav tag? Can a footer tag have an H1 tag in it? And should I use the figure tag for pictures that are essential content that need a semantically associated caption? I expect I shall have to tweak the site as I go along. As for tags such as canvas and video, they are exciting, but I have no use for them at the moment.

• HTML5 outline
• All pages should be valid W3C HTML5 (if they are not, it’s probably TinyMCE’s or Wordpress’s fault, both of which can mangle code).

Compatibility

HTML5 is implemented in IE7 & 8 via a conditional script. Expect your computer to explode if you try to open this site in IE6. IE7 was cranky when it came to elements with position: absolute and overflow: visible (drop-down menu), so there’s another little hack for that. And JQuery corners did not, on the whole, work very well in IE7. Bah.

That being said, it should look 99% the same in IE, Firefox, Safari and  and Opera.

Javascripts

I’m not a superscripter, but I can identify a goal and get it done. I like JQuery.

Cases in point:

• The photo slideshow in the header up above. Simple little JQuery script, implemented as a JS object, so it’s very portable. To do: preloading of pictures, and functionality to discover if a picture does not load.
• The second-tier mouse-over menu: this one was pretty hard. I couldn’t find a script that did exactly what I wanted so I had to make roll my own. The new delay() function in JQuery 1.4 was critical. Getting it to work in Firefox was easy, but IE threw a fit. Fixed that with some more CSS and z-index. But after fixing the problems that occured when I threw in a Superfish drop-down menu in the second tier, I was ready to burn IE at the stake. The problem was that the div containing the second tier menu had position: absolute and overflow: visible; no matter what I did, IE did not want to honour the overflow rule. It remained hidden, period. The solution was to make the height of that div 500px (arbitrary number, I admit) in IE only. As long as it’s transparent, IE allows you to interact with elements that are beneath this div (the main content); FF does not. In the end, I am very happy with the second tier, but I need to take another look at IE compatibility.

Credits

This site is made possible by the following resources:

• Wordpress
• Yet Another Photo Blog
• JQuery
• JQuery Corners
• Superfish
• Colorbox
• Wordpress jCarousel
• Other Wordpress plugins I couldn’t live without: PageNavi, Google XML Sitemaps and Akismet.

Icons and graphics from:

• FamFamFam
• Pinvoke
• VectorLady
• VisualPharm