Nerd » html 5

Another HTML5 fallback strategy for IE

Vasilis — Mon, 01 Nov 2010 20:57:34 +0000

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.

Another HTML5 fallback strategy for IE is a post from: Nerd

Equal height boxes with flexible widths

Vasilis — Thu, 14 May 2009 20:52:30 +0000

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.

One way to build a layout like this is to measure all possible box-sizes to the pixel, create all background-images for these boxes (a few hundred in this extreme case) and start writing a CSS file of a few thousand lines. I chose to see if there’s another way to do this, with less code and much less images (one). And here I present this other way.

Equal height cols with a flexible width

Basically what this technique comes down to is to place an absolutely positioned div inside a statically positioned floating div which is inside a relatively positioned div with overflow set to auto. The absolutely positioned div can inherit the left position and the width of its direct parent, but if you define its top and its bottom it will, off course, inherit these from the containing, relatively positioned div. And this relatively positioned div will get its height from the highest statically positioned floating div. Why didn’t you think of this before? (-:

Check out these examples

IE6 needs JavaScript. I didn’t bother to include it here. Opera needs an update in order to display this correctly, I filed a bugreport. IE7 has difficulties with percentages.

Equal height boxes with flexible widths is a post from: Nerd

HTML 5

Vasilis — Fri, 23 Jan 2009 22:03:57 +0000

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.

There are some very nice new attributes and attribute values I use on form elements that actually work in Opera. I used the required attibute, the type=”email” and the type=”url”. These form a efficient (but very ugly and unstyleable) client side form validation. Nice to have!

The best part of HTML 5 is that you will be able to remember every part of the HTML, even nerdy stuff like the doctype declaration. is easy to remember. Just like . So no more code searching and copypasting.

I left out the html, head and the body tags, browsers will put them where they are needed anyway, just like the tbody of a table.

You can’t use the W3C Validator for HTML like this, you’ll need the incredible validator.nu.

One thing to remember when starting to style your new HTML is to add display:block; to every new element like section. That’ll save you time. I’ll write about the CSS I wrote in a next post.

HTML 5 is a post from: Nerd