An Experiment in HTML5 and CSS3May 6, 2010
A couple months ago I decided it was about time that I jumped on the HTML5 bandwagon. I really hadn't had any real world experience building anything in HTML5, and had only used a few CSS3 properties as progressive enhancements. I really wanted to take some time to design and build something awesome - without having to worry about the elephant in the room, *cough* Internet Explorer *cough*.
Unfortunately, I didn't have a whole lot of unique content laying around that could be the foundation for my site, so I decided to go the Lifestream route. I also decided to build the site with Yong Fook's SweetCron platform, which is built on my favorite php framework, CodeIgniter. It aggregates feeds from this blog, my Twitter, Delicious, Last.fm, Flickr and YouTube accounts. But enough about the boring backend details, let's move onto the new and exciting things.
You can see the final result of my HTML5 and CSS3 experiment at me.evanblack.com. Make sure to check it out in any GOOD browser, like Firefox, Safari or Chrome.
If you take a look at the source code, you should notice how clean it is. HTML5 is a semantic wet dream. Pretty much every element, from
<article>, has a semantic meaning. This, coupled with some advanced CSS3 selectors, means you hardly ever need to use IDs or even classes! I think the hardest thing to get used to is the fact that not only is your page going to have a header and footer structure, but so is each article within your section.
If you're looking to read more about the new structural elements in HTML5, I'd recommend reading Steve Smith's article on Structural Tags in HTML5. Unfortunately, I didn't get the chance to do too much experimenting with the new
<canvas> elements, or with the new form features, but these are sure to make HTML5 even more robust once the spec is approved.
Note: Once the W3C agrees on a standard video format for the
<video> element (my guess is h.264), and browser vendors get it implemented, it will make this element much more widely used because of iPhones and iPod Touches.
Design and CSS3
Please take a look at the final result and let me know what you think! Unfortunately, there's a lot of twitter content right now, so be sure to check out the different categories to see the alternate post designs. Building this thing was quite a learning experience and it's nice to see front-end development going in a good direction.
I'll also be adapting this baby into a Tumblr theme so stay tuned for that!comments powered by Disqus