Mando Group Labs
Work With us
If you have a proof of concept or RIA you would like us to develop email or call Ian on 0845 365 4040
Building Labs with HTML5 and CSS3
HTML5 is the buzz word in web development at the moment. In the web development industry you have to keep up with the latest technologies, so being given the chance to build this Labs site seemed like the perfect opportunity to use markup and techniques that we will be using in years to come.
HTML5 is more than just new semantics, it includes other shiny new things such as Offline Storage, Canvas and Geolocation. Although the spec if not finished, we can still use HTML5 in all modern browsers today. Of course, some browsers (IE) do not handle it as well as others, but I’ll come to that later.
Thanks to HTML5 Gallery for putting Labs on the site.
Under the bonnet
To the inquisitive type, take a peek at the source code, the first thing to note is the doctype
<!DOCTYPE html>
That’s all we need to tell the browser that we are serving a HTML page. HTML5 allows us to use uppercase tags and we don’t even need to close them. But I’m straight from the XHTML era so I use lowercase and close my tags.
In fact, if you can use very minimal markup: this is still HTML5:
<!DOCTYPE html> <title>Small HTML 5</title> <p>Hello world</p>
New elements
I’ve used several of the new HTML5 elements: <header>, <section>, <article>, <nav> and <footer>. These new elements mean we can add much more semantic value to our webpages, and improving accessibility.
It’s important that use the elements in the correct order so that the HTML5 Outliner splits the page into what is effectively a Table of Contents. If we look at the Labs homepage in the outliner, it has correctly split the contents. Under normal circumstances, if there is a “Untitled Section” heading, you have probably used a <section>, when a <div> is more appropriate. But in the Labs homepage example, the Untitled Section is a heading for the <aside> tag, which is ok, because an <aside> doesn’t always have to a heading.
From reading the spec it is not clear how to correctly use several, if not all, of the new elements. Luckily for you, there are HTML5 Doctors out there (shameless plug because I’m one of them), who try to interpret, help and explain these new elements.
Forms
The only form we have on Labs is the comments form. So there I’ve added two new input types – email and url. This will, one day, allow for automatic browser validation. However, at the moment, only Opera has this capability. Apart from the email and url, there are many more new input types which you can use right now.
CSS3
Labs is built with a heavy use of CSS3, mainly :nth-of-type(). I decided to build Labs using as few classes and ID’s as I could get away with. WordPress adds a lot of classes automatically but the non-Wordpress markup is minimal. I’ll admit that at times this leads to slightly messy CSS, but it shows the power of CSS3 by being able to target different elements using a variety of tricks including nth-child and attribute selectors.
The most fun part of this was using webkit transitions to fade the colours in Safari and Chrome, check out the bottom of the CSS file for all the stuff but this is some of it
@-webkit-keyframes bgColor {
0% {background-color: #9138ff;}
25% {background-color: #ec008c;}
50% {background-color: #0077c0;}
75% {background-color: #2bb673;}
100% {background-color: #9138ff;}
}
For non-webkit browsers, the fade transition is done with MooTools, this meant adding a few classes here and there.
There is also some rotation CSS in there, including a Microsoft filter which I normally don’t like using but it works well in this case, albeit with some initial positioning quirks.
But what about Internet Explorer?!
With the launch of what looks to be a very good IE9 around the corner, we have to deal with IE8, IE7 and maybe IE6 as well. So for Labs we not only have brand new HTML5 elements to deal with, but new CSS as well. Thankfully, we have JavaScript to help us out.
HTML5shiv
Remy Sharp has written html5shiv, a fantastic bit of script which helps IE recognise and style HTML5 elements.
<!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->
Selectivizr
Selectivizr by Keith Clark is another great bit of JavaScript which makes IE play nice with new CSS3 selectors.
Questions
I could go on and on about why and where I’ve used new elements, but I suggest taking a look at the source code and if you have any questions or observations, leave a comment or ask me on Twitter.
