HTML5 Shiv

HTML5Shiv is a JavaScript workaround to enable HTML5 elements in versions of Internet Explorer before version 9 that do not support elements that are not recognized and thus allowing them to be styled by CSS. While some people refer to it as "HTML5Shim" with respect to shim (computing), there is no real difference between the names and as noted on the code repository, the only difference is that "one has an m and one has a v - that's it."

Internet Explorer compatibility and version usage

Prior to version 9 of Internet Explorer there was little to no support for HTML5 elements and other HTML5 features. Internet Explorer still commands a large percentage Usage share according to the Usage share of web browsers. Within the Internet Explorer percentage most of its usage comes from versions before 9, with version 8 holding the highest, followed by 7 and then 6. With its high usage percentage it is important to ensure that your webpage functions correctly in Internet Explorer, which is where the HTML5Shiv comes in. It allows Internet Explorer to recognize the HTML5 tags and allow them to be styled using CSS.

Usage

To enable the HTML5Shiv place the following section of code into the head element. This will load the HTML5Shiv from the Google Code repository on the condition that The Browser being used is a version of Internet Explorer earlier than version 9.

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

This must be placed in the head element because Internet Explorer needs to know AbOUT the elements before it renders them.

Example

Here is a simple example showing a before and after using the HTML5Shiv.

This following code should style any text using the

tag, new in HTML5, by increasing the font size and changing the color to orange.

<!DOCTYPE HTML>
<html>
<head>
     <style type="text/css">
          article
          {
               font-size: 22px;
               color: orange;
          }
     </style>
</head>
<body>
     <article> Hello </article>
</body>
</html>

Result in Internet Explorer 7:

Since Internet Explorer doesn't recognize the

tag it applies the default styling to it.

Now, we will add in the shiv.

<!DOCTYPE HTML>
<html>
<head>
     <!--[if lt IE 9]>
          <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
     <![endif]-->
     <style type="text/css">
          article
          {
               font-size: 22px;
               color: orange;
          }
     </style>
</head>
<body>
     <article> Hello </article>
</body>
</html>

Result:

Once the shiv has been used, Internet Explorer recognizes

as a valid tag and it can then be styled.

Support

The HTML5Shiv is licensed under the MIT License and available from its Google code repository.

Updates are on going and a list of recent updates can be found here: http://code.google.com/p/html5shiv/updates/list.

See also

  • Modernizr

  • , John Resig