I’ve been playing around with WordPress and customizing some themes for it recently. Part of this required testing it out in IE8.
One of the additions in HTML5 are semantic tags such as article, section, nav, and more. They allow you to do cleaner page design layouts as illustrated below and give more tips to SEO algorithms.
<div id=”section”><div id=”sidebar”>
This works great in IE9+, Firefox 3+, & Chrome but IE 7/8 will ignore any styles on tags they don’t recognize. What if you want the goodness of HTML5 but still need to care about IE 7/8? What if you already upgraded to IE9 and need an easy way to see what IE8 would be like?
<!–[if lt IE 9]>
The only real caveat to this is that the page layout is now dependant on js being enabled, usually a pretty safe assumption.
My day got even better when I realized that IE9 baked in alternate browser mode displays with the click of F12. The new toolbar section allows you to swap between Browser Mode and Document Mode. Browser Mode: IE8 is the one you want to trigger the conditional [if lt IE 9] to include the shiv. Document Mode: IE8 Standards will let you test the shiv out. A last bit of fun is that IE8 still does not have a content model attached to elements created this way. You’ll need to add these lines to your stylesheet
A great place to start is by checking out HTML5 Boilerplate and optionally reading some of the highlights explored here. The boilerplate uses Modernizr which includes the html5shiv among other snippets. Once these bits were in place the IE 7/8 experience was back on par with IE9 and made my development life much easier.