Archive for the ‘html 5’ Category

Another HTML5 fallback strategy for IE

Versions of Internet Explorer prior to number 9 can not style unknown elements without the help of JavaScript: by adding the unknown elements to the DOM you can style them like any other element. So if you want to use the new HTML5 elements you will need JavaScript to style your site. Most people will have no problem seeing your site but for those unlucky visitors with IE and JavaScript disabled (for whatever reason, there are lots of them), the experience can be horrible. Here’s a simple solution:

Serve your default stylesheet to all browsers except IE8 and lower. To those “browsers” you serve Andy Clarke’s universal ie6 css in a conditional comment. Then with the help of a simple javascript you immediately replace this css file with your default css file. Now those unlucky visitors will at least see a nicely styled easy to read minimal site. (View source on this page to see how it works)

I couldn’t think of a way to replace the fallback css before it gets loaded so the only negative side effect of this technique is that it uses an extra http request. I think it’s worth it: for me this JavaScript dependency was the only thing that kept me from using HTML5 elements.

Equal height boxes with flexible widths

My design buddies @work came up with one of the most complex layouts I ever had to build. You could desribe it as an elastic layout with boxes with a flexible width which should have the same height as it’s siblings. With rounded corners and dropshadows offcourse. But that would be too easy a description. There are templates with 2, 3 and 4 boxes next to each other and these boxes can be contained within containers with different widths. A cynic would ask me why I didn’t use tables and he would be right. It might have saved me a lot a hassle. But forget about tables.

Ok, no tables

HTML 5

I switched to HTML 5. A nerd blog should have a nerdy doctype. There’s not much to say about it. I replaced the first div in the old HTML with a new element called header, I replaced the following divs which are direct children of the body with the new element section, I replaced the div that was a child of the section with the element article and replaced the last div of the page with the element nav. I could have chosen the element footer, but I think nav describes its purpose better. I don’t have an aside so I don’t need that element.

Some details about HTML 5