HTML5 Without the Shiv

When it comes to the new HTML5 elements, most browsers can handle them just fine. All versions of Internet Explorer prior to IE9 won’t create dom structure for these elements. This seems like a bit of an issue.

Remy Sharp has created HTML5 shiv, a JavaScript file that enables these new elements, ensuring they affect the DOM when they appear in HTML. Whilst this script does an excelent job solving this issue, I feel that javascript should be used to add functionality to a page, it shouldn’t be required in order for a page to render.

Sometimes it’s possible to create a site that uses the HTML5 elements for semantics, but doesn’t rely on them for styling.

Take the following example:

<header>
  <ul>
    <li><a>Section 1</a></li>
    <li><a>Section 2</a></li>
    <li><a>Section 3</a></li>
  </ul>
</header>

We could style the <header> in some way, but in order to do that we would need to use HTML5 shiv. Or we could apply the styling to the <ul> instead. If we do that, we don’t need the shiv at all.

I think we should use the shiv where necessary, but try not to rely on it. Some great HTML5 sites that use HTML5 without using HTML5 shiv:

Edit: This site now uses the Shim as of 2013-04-28, but the number of users who will experience this polyfill is now very few.

Ok, that list is looking a bit sparse, if you’ve built an HTML5 site without javascript, or know of one, let me know.


Notice: Array to string conversion in /var/www/joshemerson.co.uk/public_html/site/plugins/tags.php on line 22

Fatal error: Uncaught Error: Function name must be a string in /var/www/joshemerson.co.uk/public_html/site/plugins/tags.php:22 Stack trace: #0 /var/www/joshemerson.co.uk/public_html/site/templates/post.php(12): tags(Object(page)) #1 /var/www/joshemerson.co.uk/public_html/kirby/lib/template.php(36): require('/var/www/joshem...') #2 /var/www/joshemerson.co.uk/public_html/kirby/lib/template.php(25): tpl::loadFile('/var/www/joshem...', Array, true) #3 /var/www/joshemerson.co.uk/public_html/kirby/lib/site.php(203): tpl::load('post', Array, true) #4 /var/www/joshemerson.co.uk/public_html/kirby/system.php(65): site->load() #5 /var/www/joshemerson.co.uk/public_html/index.php(71): require_once('/var/www/joshem...') #6 {main} thrown in /var/www/joshemerson.co.uk/public_html/site/plugins/tags.php on line 22