HTML5 and IE8
The example project I put together for the article I wrote on OOCSS is incomplete, and it’s bothering me. This article will address one glaring oversight: support for IE8.
Why Care?
IE8 is a big target. Depending on who you ask, IE8 controls over 30% of the market, while IE6 and IE7 each have less than 10%. IE9’s adoption rate has been slow as well with less than 25% of Windows 7 users claiming it as their primary browser.
Given IE8’s prominence and IE9’s slow adoption rate, it behooves us to make sure our layout doesn’t look janky in IE8.
What’s Currently Wrong
Here’s what the Twitter for Movies layout looks like in IE8:
Not pretty. The reason for the busted layout is simple, though: IE8 doesn’t support several HTML5 elements, including the section, header, and footer tags that we used in this layout.
Adding support for those tags is easy.
Modernizr
Modernizr is a JavaScript library that magically adds support for certain HTML5 elements to IE6-8. A quick visit to the Modernizr download page, and we have a copy of the library that we can link into our head tag.
<script type="text/javascript" src="modernizr.js"></script>
To enable Modernizr, we also need to change our html tag from this:
<html lang="en">
To this:
<html lang="en" class="no-js">
That’s it! Sorta. Here’s what our layout looks like now:
What gives?
Well, Modernizr adds support for the HTML5 tags we’re using, but it doesn’t set any default display properties. Safari, Chrome, and IE9 treat the section, header, and footer tags as block-level elements by default, but even with Modernizr, IE8 doesn’t. The fix is simple; add this line to our CSS file:
header, section, footer { display: block; }
And here’s the result:
Drawbacks
It’s 16k of additional code that your users have to download. The overall goal of the OOCSS tutorial was speed, which you gain through shorter selector chains, reusable classes, and smaller CSS files. Smaller downloads mean faster page loads. Adding another 16k of code—which is still quite small!—runs contrary to the purpose of the original article.
The good news is that you can accomplish the same thing with about 4k of code using the html5shim library, which is the magic part of Modernizr that adds support for HTML5 tags in IE.
That said, Modernizr does a lot more than just give us a few new elements to work with, and if you take full advantage of the library’s features, the extra 12k is worth the download.
UPDATE: This has turned into a three-part series. The next installment discusses the HTML used in this demo.
4 Notes/ Hide
-
renaissancenerd posted this
