I started working on the template for a new website today and decided to have a look at HTML 5 for laying it out. Everything was looking nice until I discovered that Internet Explorer does not allow CSS styling for elements which it does not know about (e.g. <header> <section> etc). There is a Javascript workaround but I prefer not to use that so show here my solution for the time being.
Some more about HTML 5
I won’t comment here about the new elements etc in HTML 5. Instead, have a read of these two recent articles:
- Everything you need to know about HTML5 at TechRadar
- New elements in HTML 5 at IBM Developer Works
The Javascript Solution
The Javascript solution is to create elements like so:
document.createElement('myelement');
This means they can then be styled in Internet Explorer. However, if the visitor has Javascript disabled then it’s not going to work and the layout of the site will be broken. Although the numbers of visitors with Javascript disabled is low, it’s not something I’m prepared to accept at the present time.
My temporary solution
Until all but a few Internet Explorer users have upgraded to an HTML 5 compliant version of Internet Explorer (IE9) I’ll use the solution presented here. It’s not ideal but it will make changing the HTML to be more semantic HTML 5 later easy.
Here’s more or less the document structure I was trying to do:
<header> <nav> ... </nav> </header> <section> <aside>...</aside> <article> ...</article> <aside> ...</aside> </section> <footer> ... </footer>
And here’s my solution, which is to replace the HTML 5 elements with <div>s with the class name the same as the HTML 5 element which they replace:
<div class="header"> <div class="nav"> ... </div> </div> <div class="section"> <div class="aside"> ... </div> <div class="article"> ... </div> <div class="aside"> ... </div> </div> <div class="footer"> ... </div>
I’ve used classes rather than ids because the elements can appear multiple times in the DOM. As you can see in the above example there are a couple of asides.
In the future when I decide to make the document template semantically correct HTML 5 I can simply replace <div class=”header”> … </div> with <header> … </header> etc and change my CSS from .header { } to header { } and it’s all good.
