Using Html 5's Semantic Improvements Today
I my last post wrote about some of Html 5's improvements to the standard's semantic tags. That is all fine and dandy but if you have to support older browsers, can you really use them? As a matter of fact you can (easily). I will show you how to do that here.
Html 5 holds a lot of promise because it is bringing a load of new features our way. If you have not started reading about what is coming, I recommend doing so. What I am going to show here is how to use the new semantic tags in your Html today. There are a lot of features that will not work after you use what I am recommended here though (this does not bring support for canvas, video or audio to ie6, for example), but at least we can move forward with part of the specification.
The Problems
First, the problems, and there are two. The first issue is found older browsers and some
newer (like Firefox 3.6.x), which is that the newer semantic elements
like <article />, <section />, <nav />,
<header /> and <footer /> are treated as inline elements
since they are unknown to the browser's idea of the dom and do not have the appropriate default
styling. That one is an easy problem to solve as some simple Css like the following will solve
the issue: article, section, header, footer, nav { display: block; }.
The second problem is not solved quite as easily. In some browsers (ie 6-8) the elements are not recognized at all, inline or block. In these cases the browser needs to told that they exist via Javascript. Writing this is not hard but there are some projects available on the web to do this for you so you don’t have to.
Solving the Problems
I have solved this last problem in two different ways. I’ll show you what I did at first, and what I am now doing second.
Html5 Shiv
The way I used to solve this is to use html5shiv, which can be found up on Google code. It’s a tiny javascript file that loops through all the new elements of Html 5 and calls createElement(x) on them, letting the browser know that the elements exists. It works great and you can reference it on Google code if you want.
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
It is easy and it works. But I moved on to another project, Modernizr.
Modernizr
The Modernizr script does what html5shiv does and more. In addition it also adds some very useful classes to your page to make it easy for you to key off of browser capabilities. For example, if you look at this next block of text in Chrome and IE 8, you will see very different results.
Lorizzle ipsum dolizzle i'm in the shizzle amizzle, its fo rizzle adipiscing i saw beyonces tizzles and my pizzle went crizzle. Nullam sapien velizzle, aliquet volutpat, nizzle quis, gravida vizzle, rizzle. Pellentesque egizzle tortizzle. Sed erizzle. Things at dolor dapibizzle turpis tempizzle tempizzle. Gangster pimpin' nibh izzle turpizzle. Fo shizzle izzle tortor. Pellentesque fo rhoncizzle nisi. In hac phat platea boofron. Pot dope. Curabitur ghetto urna, get down get down ghetto, bow wow wow ghetto, gangster vitae, get down get down. Shizzle my nizzle crocodizzle suscipit. Integizzle sempizzle pimpin' crackalackin purus.
In Chrome and other browsers that support the box-shadow css property, you will see text in a box that has a dropshadow and has a border. If you are using IE 8 or lower, you will see a box, with a border, no dropshadow and really small text. The css that is attached to this element is as follows:
<style type="text/css">
.gangstaLoremIpsum { border: solid 1px #AAA; padding: 3px; }
.no-boxshadow .gangstaLoremIpsum { font-size: .5em; }
.boxshadow .gangstaLoremIpsum { font-size: .8em; -webkit-box-shadow: 5px 5px 5px #ccc; box-shadow: 5px 5px 5px #ccc; }
</style>
The first class will be applied in both browsers. The second will be applied in browsers that do
not support box-shadow, the third applied to those that do. These last rules are workable because
of Modernizr. When the page loads, the script runs and adds classes to the <html />
element of the page. In this example, if IE 8 renders the page the “no-boxshadow” class will be
added to the <html /> element. In Chrome, “boxshadow” is added. This will
allow you to selectively do various things to your styling based on the capabilities of the
browser. Pretty neat.
Conclusion
You can start using parts of Html 5 today. Start experimenting. The new semantic tags can improve your markup and with the tools above you can use them today, and with Modernizr you get an easy way to target browser capabilities.