Using Modernizr to Implement the HTML5 Shiv

HTML5 uses tags and other bits of code that may not be recognized by older browsers. It’s always good as a designer to make sure that you are working in the most recent version of HTML so that your pages aren’t outdated at the outset or don’t become outdated very quickly.  However, you do have to be aware that there are people out there that are running older browsers, likely because they have older computers or don’t routinely update their software.

To protect our pages from breaking when being viewed on these older browsers, we can use a bit of JavaScript to help us out. The JavaScript we use for this is referred to as the HTML5 Shiv and can be found on a resoure website called Modernizr. I’ll walk you through the steps for downloading the necessary JavaScript snippet and implementing it on your site.

  1. Visit Modernizr.com. The homepage should look something like (fig. 1).

Modernizr Homepage

  1. From the top menu, click Download(fig. 2)
    Modernizr Homepage indicating Download Button

  2. From the left menu, select HTML5 Shiv, minify, and Add CSS classes(fig. 3)
    Modernizr Download Options

  3. Click Build from the top right. (fig. 4)
    Modernizr page indicating Build button

  4. From the pop up message, select the first Download Option.  (fig. 5)
    Download Option

  5. Locate the download. (fig. 6)
    Finder Showing Download in Downloads Folder

  6. Open the file in your Code Editor (I’m using TextMate). (fig. 7)Code Editor with javascript file open

  7. File > Save As into your js folder. If you don’t have a js folder, you can simply create one. It’s a sub-folder just like images or css and is used to organize any JavaScript files that are included in your site. (fig. 8)Save As in js subfolder

  8. Locate your HTML file.

  9. We need to add a set of <script></script> tags to our  <head></head> section in order to tell our browser to include our newly saved JavaScript file when loading our page. Our opening script tag has an href attribute pointing to the file in our js folder, so our code looks like this: <script src=”js/modernizr-custom.min.js></script>. We use the exact name of the file that lives in the folder.

The head section of your HTML file should now look something like this:

<head>
<title>HTML5 Shiv</title>
<link href=”css/style.css” rel=”stylesheet”>
<script src=”js/modernizr-custom.min.js></script>
</head>

Make sure you Save your HTML file and Refresh your browser.

That’s it!

You likely won’t see any changes to your site because I’m betting you have a new enough browser, but now people who don’t will be able to view your site as you intended it (or very close to it).

It’s a good idea to include the HTML5 Shiv with any website you make. It is one of the few ways we have to ensure that everyone will have an optimal or close to optimal experience on your site.

Web Design For Graphic Designers Book Cover

Web Design for Graphic Designers

A Step-by-Step Guide for creating a modern, responsive website from scratch

Co-authored by Jillian Noble and Ryan Krug

Published by EMSPACE

Read Online for Free

Comments

  1. says

    You’re the best. I’ve been developing for years, but have managed to avoid Modernizr so far out of pure disregard for those on older browsers… Obviously an unsustainable practice when working with corporate clients. Thanks for the step-by-step — I needed a little reassurance that it was indeed as simple as adding a script and I wasn’t missing anything!

Leave a Reply to Jillian Noble Cancel reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>