With this new blog, comes new technology: this blog is written using HTML5 and a dash of CSS3.
When I set out to finally create this blog, I decided it would be home to all the latest and greatest news that I could find about web technology, a sort of geek playground and knowledge base, all wrapped into one.
And if that’s the case, it just has to be HTML5 and use some CSS3, right?
So, once I finally got GoDaddy to play nicely and let me install WordPress, I was ready to start tearing apart the native WP code, but decided to do a little morning reading first, to let my coffee settle in…
And low-and-behold, I came across this article:
http://www.thatstandardsguy.co.uk/blog/2009/04/03/brave-new-world-wordpress-theme/
Now, anyone who knows me knows that I am an enormous sucker for Microformats, and I’m definitely interested in ARIA, so… how could I go wrong?
I downloaded the theme (BIG thank you to Karl Dawson), installed it, did a small amount of customizing, applied some styling, and here we are!
The basics of converting from XHTML to HTML5 are:
<!DOCTYPE html PUBLIC "...dtd"> –> <!DOCTYPE html>
<div class="header"> –> <header>
<div class="footer"> –> <footer>
And we now have <section> for where we would normally use a <div>, and <article> for things like posts.
The biggest issue with using HTML5 right now is that older browsers might not acknowledge elements if they don’t recognize them. However, Remy Sharp offers a rather brilliant work-around to the problem. Yes, it involves JS, and yes, that JS has to be in the <head> of your page, but the only browsers that really have this issue are IE so at least we can use conditional comments…
The only other thing you need to do is add a tiny bit of CSS for the HTML5 elements that should be block elements (header, footer, section, article, etc.), explicitly setting them as display:block;; this can happen in your external CSS file. After that, all your HTML5 elements are ready to go!
There are far smarter people than I that have already written at length about HTML5… So see below for a sampling of the research I did in preparation for this project.
As for the CSS3 I used, I went fairly light, and took a progressive enhancement approach. If you view this site in various browsers, you will see varying CSS levels. Safari 3+ and Firefox 3+ naturally handle things the best, but IE completely loses the rounded corners and RGBA backgrounds. All-in-all, I added 4 extra lines of CSS for IE-only: one was a filter so IE6 would handle my background PNG signature in the upper-left corner, and the other three were so fix the display:table; settings for the footer (and I could have easily done the footer without using display:table;, but wanted to play with this new toy… :-).
So, take a peak under the hood, see what you think, and feel free to let me know of any questions, comments, concerns, or corrections you come across!
Happy coding,
Atg
For more in-depth reading, these links are a good place to start:
http://html5doctor.com/
http://html5doctor.com/your-questions-answered-1/
http://html5doctor.com/your-questions-answered-2/
http://html5doctor.com/the-header-element/
http://html5doctor.com/nav-element/
http://html5doctor.com/the-section-element/ (note the “Rules of thumb” section at the bottom!)
http://html5doctor.com/the-footer-element/
http://html5doctor.com/absent-elements-and-validation/
http://html5doctor.com/designing-a-blog-with-html5/
(and for the visual learners in the audience… http://html5doctor.com/wp-content/uploads/2009/06/html5-article-outline.gif)
And here are a few examples of HTML5 in the wild:
http://html5doctor.com/html-5-boilerplates/
http://html5gallery.com/
And once you think you’re golden, as we all know, you got keep it validated!
http://html5.validator.nu/
http://gsnedders.html5.org/outliner/
You got a problem with that?? If you think you found an HTML5 bug, please, let people know about it!
http://html5doctor.com/its-bug-report-time/