A Look Into: HTML5 Shiv and Polyfills

This article is part of our “HTML5/CSS3 Tutorials series" – dedicated to help make you a better designer and/or developer. Click here to see more articles from the same series.

In our previous post we have discussed a few new HTML5 elements that are already widely used, namely header, nav, footer and article. Furthermore, if we give styles to these elements then view them in a modern browser, we should see the result of the styles.

However, this is not the case when we view them in Internet Explorer 8 and earlier (which we refer to as ‘old browsers’), somehow the styles do not seem to apply.

Recommended Reading: HTML5 Basic Elements: <header>, <nav> & <footer>

Let’s see the example below:

This thing happens because old browsers were not built for HTML5 and therefore they don’t recognize the elements, hence the styles won’t be applied as well.

How to Solve This Problem

We can use this little script document.createElement(elementName) which was initially mentioned by Sjoerd Visscher in his comment. Now, let’s say we want the old browsers to recognize the header element, we can write:

document.createElement('header')

Then, when we view it in Internet Explorer

The header element now has the styles applied, whilst the other elements remain unstyled. This script will also apply to a non-sense element, for example;

document.createElement('foo');

The script above will make Internet Explorer recognize the foo element even when there is no such element in HTML5. As for the other elements in our page, we can copy and paste the script and specify the elements we need to patch, but of course doing so is unnecessary as it has already been done with HTML5shiv.

HTML5 Shiv

The script above was actually the inspiration behind the HTML5shiv development.

HTML5shiv is a library to enable all new HTML5 elements and sectioning in the old browsers. We only need to link this library to our document and put it inside Internet Explorer conditional comments, as follows;


<!--[if lt IE 9]>
<script type="text/javascript" src="html5shiv.js"></script>
<![endif]-->

That way, the library will only be loaded in Internet Explorer 8 and below, as the other browsers won’t need it. Now, when we view our webpage in IE, all the elements should have their styles.

View Demo

Download Source

Polyfills

We have covered about Polyfills several times through our HTML5 tutorials. This term was initially coined by Remy Sharp, he described it a: “A piece of code (or plugin) that provides the technology that you, the developer, expect the browser to provide natively.”

As we can see from his description, Polyfills basically have the same purpose as HTML5shiv, but in this case, Polyfills will also mimic the functionality of the elements.

There are already a bunch of Polyfills for every new browser feature, here is the complete list. And, the best way to use Polyfills is to load it along with Modernizr, let’s see the following example;


Modernizr.load({
  test: Modernizr.placeholder,
  nope: 'placeme.js'
});

Modernizr, in this example, tests the placeholder feature and will deliver the Polyfills, only if it turns out the browser does not support the specified feature.

Recommended Reading: How to use HTML5 <details> and <summary> element