HTML5 And Internet Explorer: Modernizr To The Rescue!

My wife wanted to see my WatchMeCode website so she could post it on her Pinterest (which is a site I don’t understand… but that’s beyond the point).

IE Hates HTML5

She pulled it up on her work laptop, which was equipped with… IE8! … and it looked like this:

Screen Shot 2012 01 22 at 8 01 29 PM

Of course that’s not at all what I expected the site to look like. I expected it to look more like this:

Screen Shot 2012 01 22 at 8 06 43 PM

This site is one of the first I’ve built using the modern HTML5 tags like <header>, <section>, <article>, and <footer>. I know IE doesn’t like tags that it doesn’t recognize and IE8 or below certainly don’t recognize HTML5 tags.

Modernizr To The Rescue!

The answer is simple, fortunately. Grab a build of Modernizr and drop it in to your site… only, I already had it in my site. So why was it still looking all broken and stupid?

It turns out I had the Modernizr script at the very bottom of the HTML <body> tag – one of the tricks for performance optimization of loading scripts. However, including Modernizr at this point means that IE won’t recognize the new HTML5 tags until after the page has already loaded, thus the broken site design.

Push the Modernizr script up to the top of the <head> and everything works. Of course, I’m using some CSS3 so it’s not perfect, but it’s certainly nice in comparison to the broken version:

Screen Shot 2012 01 22 at 8 03 45 PM

Now the interesting bit is that I don’t really need IE support in my website. I only get 3.6% of my traffic from IE users – I really don’t expect people that are interested in the guts of JavaScript to be IE users after all. But with a fix as simple as this, it’s not a big deal to go ahead and add minimal support just to keep the site

Use Modernizr… At The Top Of Your HTML

The morale of the story: use Modernizr. It’s just that easy. Of course it does a lot more than just include an HTML5 shim for older browsers, too. There’s a ton of great stuff in it. But in my case, that’s all I really needed it for.

And when you do use it, be sure to include it in the <head> of your HTML so that it applies before the rest of your page loads.


Post Footer automatically generated by Add Post Footer Plugin for wordpress.

About Derick Bailey

Derick Bailey is an entrepreneur, problem solver (and creator? :P ), software developer, screecaster, writer, blogger, speaker and technology leader in central Texas (north of Austin). He runs SignalLeaf.com - the amazingly awesome podcast audio hosting service that everyone should be using, and WatchMeCode.net where he throws down the JavaScript gauntlets to get you up to speed. He has been a professional software developer since the late 90's, and has been writing code since the late 80's. Find me on twitter: @derickbailey, @mutedsolutions, @backbonejsclass Find me on the web: SignalLeaf, WatchMeCode, Kendo UI blog, MarionetteJS, My Github profile, On Google+.
This entry was posted in HTML5, User Experience. Bookmark the permalink. Follow any comments here with the RSS feed for this post.
  • phil jay

    Somehow I like the IE8 version of the page more… Maybe because it has a cleaner look :P

    • http://mutedsolutions.com Derick Bailey

      yeah… maybe i was just getting a little over-excited about “OOOOH! SHINY CSS3!!!!” :D

    • Anonymous

      square corners are the new rounded corners?

  • http://timgthomas.com Tim G. Thomas

    If you’re just using Modernizr for its shimming capabilities, you might want to check out HTML5Shim ( http://code.google.com/p/html5shim/ ). It, too, brings IE up-to-date with the new HTML5 elements, but is a little lighter-weight than Modernizr.

    Oh, and don’t forget to put it in your <head>, too. :)

    • http://paulirish.com Paul Irish

      The HTML5shiv project is kind of worked on in collaboration with Modernizr, so its the exact same code. Modernizr does do extra stuff, though so if you like any of its detects, the extra 1k or whatever is probably worth it. :)

  • Anonymous

    Don’t quote me on this, but if I remember correctly, I first learned about the need for Modernizr to be up top in the Html5 Boilerplate comments. It’s a good project to look through just for ideas and the comments, even if you don’t use it.
    Oh, and WatchMeCode looks really interesting! I’m definitely going to have to check it out. Thanks.

  • Michel

    I used http://code.google.com/p/html5shiv/ a few days ago
    Worked very well ONCE I had validated the page!!
    IE also hates HTML 5 if you have unterminated tags