DIGITALREP

How to use the HTML5 shim in websitesOctober 09, 2013

Developers everywhere got mega excited about HTML5 and CSS3, until they realised with some measure of disappointment that older browsers won’t support the newer HTML5 elements such as article, section, aside, etc.

Mainly this problem affects versions of IE prior to 9, which still hold high spots on the coveted browser usage statistics list. Anyways, if these browsers don’t recognise the elements, then they won’t allow styling of the unknown elements without the use of javascript.

The workaround to this is called the HTML5 shiv (or HTML5 shim – I’m guessing the nerds who came up with this idea couldn’t agree on which name was more adequate – a reference to a cruedly made weapon for use in a prison or tapered, wedged piece of material). This plugin simply recreates the HTML5 elements using document.createElement(elementName) so that the CSS engine knows they exist and can thus apply styles to them. A guy by the name of Sjoerd Visscher came up with the idea itself before it was adopted by someone else and made into a plugin that almost every developer to this very day uses.

Using a javascript plugin

As with any other javascript plugin just include the source in the head part of the webpage after the CSS like this:

<!–[if lt IE 9]>
<script src=”html5shiv.js”></script>
<![endif]–>

Custom javascript to recreate each element for IE

Having said all of this, I have noticed lately that rather than loading the whole HTML5 shiv script, which might be a bit on the large side for smaller websites, a lot of developers are simply creating the elements themselves inside of the conditional statement like this (keeping in mind that this conditional statement will affect all versions of IE, not just versions previous to 9):

<!–[if IE]>
<script>
/*@cc_on’abbr article aside audio canvas details figcaption figure footer
header hgroup mark menu meter nav output progress section summary time video’.replace(/\w+/g,
function(n)
{
document.createElement(n)
})@*/
</script>
<![endif]–>

Custom javascript to recreate each element across the board

Or alternatively, just inside a script tag like this (where this will happen on all browsers, not just IE):

<script>
document.createElement(‘header’);
document.createElement(‘footer’);
document.createElement(‘section’);
document.createElement(‘aside’);
document.createElement(‘nav’);
document.createElement(‘article’);
</script>

Category: Tutorials
Tags:  

Leave a Reply

Your email address will not be published. Required fields are marked *