Last time, we took a look at the HTML Viewport Meta tag, which is important for getting your site to look good on mobile. Since our HTML standard is HTML5, we need to make sure it works in older versions of Internet Explorer. I’m not considering IE6 in this conversation, although according to this site, 1.7% of the world is still on it. So that leaves IE8 and 9. As you can see from HTML5 Readiness, that IE8 and 9 are lacking in HTML5 powers. So IE10 will have the fullest support of HTML5 and CSS3, but we can’t ignore IE8 and 9 users. In fact, in some workplace environments, those browsers are enforced by IT policies.
Since HTML5 tags like <section>, <aside>, <footer>, and <figure> are not in the XHTML spec, they won’t be recognized by IE. But IE will go into quirks mode when encountering these elements, but all of them will be styles as inline elements. There’s 2 issues at play here, the fact that IE won’t recognize the elements and how they are being styled. Most normalize style sheets, like this one from Nicholas Gallagher and Jonathan Neal, will take care of the styling of the elements as block level instead of inline elements. Here’s how we do that:
<!–[if lt IE 9]>
<!–[if lt IE 9]>
Break out the wineglass and celebrate! Now you are ready to use HTML5 in all its glory and be sure that it’s supported on those older browsers. Not so much though. You should still test on those browsers as I have seen odd things happen to HTML5 docs in them. As always, be sure to validate your HTML.
Next time, we’ll talk about Mobile site design testing and some tools and resources for simulating and testing.