Mikael's blog

A developers sixth time trying to maintain a blog

Somewhat backwards compatible

I got the chance to see my blog through the eyes of Internet Explorer 8 today, and boy was that something to behold. There was no styling what so ever. It looked like the internet pre 1995.

This site uses HTML5 and CSS3 and that is fine for most modern web browsers. Even those that has no support for HTML5 renders ok, mostly due to the fact that they ignore the tags they dont recognize and just renders them as they would any <div>-tag. But not dear Internet Explorer. Internet Explorer < 9 just ignores the tags and doesn't style what it doesn't know. Awesome!

Good thing then that a couple of guys realized that you could trick IE into rendering unknown tags by creating them with javascript.

1
document.createElement("mysuperspecialtag");

The above piece of javascript is all that is required for IE to accept all <mysuperspecial>-tags and style them with CSS.

Thankfully they built a little script that does this (and a bit more) for all the new HTML5-elements.

1
2
3
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Include the above in the head of your HTML document and you're good to go.

Now this just solves the IE problem. The default in HTML5 is to render most of the new elements as blocks. But the older browsers don't necessarily do this so it's considered best to do this implicitly in your CSS file.

css; header, nav, hgroup, section, article, footer, address { display: block; }

The above are not all of the new HTML5 elements but you can add whatever else you use on your site.

DISCLAIMER: I'm at home right now with nothing but the latest and greatest browsers at hand so I can't check that my changes actually worked, but at least I'll get to look at it with IE 8 again tomorrow.

by Mikael Lofjärd
Comments
by Mattias Bengtsson on
Har du testat modernizr? Jag tror de försöker lösa samma problem. :)
by M on
Normalize.css är en annan grej på samma tema. Jag har inte läst på eller så, men vi använder, tror jag, det här i vårt nuvarande projekt.
by Mikael Lofjärd on
@M: Normalize.css looks very nice. I will look into it.
by Mikael Lofjärd on
@Mattias Bengtsson: modernizr is awesome, but it doesn't fix the problem. It just lets you detect the problems and act on them as you see fit. It's a feature-detection library.
by Mattias Bengtsson on
Ah, wasn't quite sure what modernizr did. :)
by Mikael Lofjärd on
Normalize.css did the trick. The site looks almost perfect in IE 8 now!

Name:

Home page:

Comment: