Coding, Software Development

HTML5 and CSS issues

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.

HTML4

<div id=”header”>
<div id=”nav”>
<div id=”article”>
<div id=”section”><div id=”sidebar”>
<div id=”footer>

HTML5

<header>
<nav>
<article>
<section><sidebar>
<footer>

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?

The old standby trick of browser sniffing with dynamic stylesheets doesn’t work anymore since the elements are outright ignored.  Fine by me since it’s not an option I like to begin with and spurs me to keep looking.  I liked even less the idea of scripting the pages back to <div>, this is just extra work and more cross browser headache.  It would be ideal if we could keep our markup, and our styles, but give the lesser versions of IE a heads up.  Turns out we can by using some js in the <head> in the form of document.createElement(“ourNewTag”).  A little bit of javascript courtesy of the open source community hosted on google code lets us easily include support for all the new HTML5 tags with one script.

<!–[if lt IE 9]>
<script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js“></script>
<![endif]–>

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

article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {display:block;}

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.

Discussion

No comments yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: