Why You Need to Know HTML5 and CSS3 Pt.1

Preface: This is the first post in a series as I am using new features introduced in HTML5. I likely won’t cover everything because I’m sure there is a lot of obscure stuff in there that won’t matter to 99% of us. Lets face it, if you’re a web dev guy like me, then you’re a UI guy, a UX guy and are driven at getting your site or app to look just right, clean and obvious. HTML5 and CSS3 are bringing huuuuge improvements in this and I’d like to make a few posts just to go over these.

I really want to share with everyone who has tried or wanted to do tab controls and if you’re doing content driven sites in the past couple years you probably have. The problem we face with getting really good looking tab controls are the rounded edges, often we have to use back ground images on them with a lot of table cells or spans to form each individual tab. As soon as you get the table looking just right and the ton of javascript added to make it all work you open your site in a different browser to find that things 1.) don’t align properly or 2.) the color in the image which form the edges of your tab do not match the rest of the screen. So what do you do now? You create a background image to fill the rest of the tab content. This looks great on a PC but what happens when someone start pulling your site content over a 2G or 3G cellular connection? You get a crawling site which takes even longer to render. Then the user does a pinch-to-zoom to read your site closer up and your images you used to have pretty tabs get all smudged and ugly.

As you can see there are a lot of hoops to jump through before html5 and css3 support. Now we have a CSS element called border-radius which takes this all away. You can now create a gorgeous rounded tab with a simple <span> element with a CSS style. Border-radius can take up to four values which relate to top-left, top-right, bottom-right, and bottom left corners. For example a simple tab would be made:

<span id="tab1" style="color:#66a1af; text-align:center; cursor:pointer; border-radius:5px 5px 0px 0px; border-bottom: 0px solid; border-left:1px solid; border-right:1px solid; border-top:1px solid; ">I'm a Tab!</span>

Here we tell the span to have a one pixel border on the left, top and right and to have a curvature in the top-left and top- right corners. Additionally, I put in to change the mouse cursor to a pointer to let the user know that the tab is click-able but this will result in the following when run in a browser supporting html5 and css3.

Gorgeous! So now this is completely rendered by the browser, no images, no smudging, color correct to the rest of your page. Now just to make your tabs active you’ll need to wire up javascript to your onClick events.

A quick sample I wrote up in about ten minutes looks like this. I gave the id element on each tab span an name such as tab_1_butt, tab_2_butt, etc and the content spans as tab_1_content, tab_2_content, etc. I wired up each span tab’s onClick with a call to a javascript function with that tab’s id number. For example, onclick=”tab_focus(1);”,onclick=”tab_focus(2);”, etc. The javascript function then is very simple.

And that it, Ridiculously easy tabs with CSS3. In practice I am using this with a little PHP code to write out this with a Create_Tab(cTitle, cContent) in which you just pass in a title and the html which represents the content.

function tab_focus(id){

for(i=0; i<8;i=i+1)
document.getElementById(“tab_” + String(i+1) + “_content”).style.display=”none”;
document.getElementById(“tab_” + String(i+1) + “_butt”).style.backgroundColor=””;
}catch(err){ }

document.getElementById(“tab_” + String(id) + “_content”).style.display=”block”;
document.getElementById(“tab_” + String(id) + “_butt”).style.backgroundColor=”#fafafa”;
document.getElementById(“tab_” + String(id) + “_content”).style.backgroundColor=”#fafafa”;

Please do leave a comment if you have any questions or suggestions for future posts or message me on twitter @Keyboardg.


Leave a Reply