Home arrow HTML arrow Page 2 - Using HTML5 Elements in IE with html5shiv
HTML

Using HTML5 Elements in IE with html5shiv


Even when the hype generated by HTML5 in the last few months has urged many web designers to start using some of the new markup elements bundled with the specification, some are still reluctant to follow this edgy trend. The reason for such a conservative attitude is perfectly understandable: considering that Internet Explorer lives in a world where <header>, <nav> and <footer> are strange things that must be ignored, there’s nothing wrong with playing it a little on the safe side.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 3
April 06, 2011
TABLE OF CONTENTS:
  1. · Using HTML5 Elements in IE with html5shiv
  2. · Styling HTML5

print this article
SEARCH DEVARTICLES

Using HTML5 Elements in IE with html5shiv - Styling HTML5
(Page 2 of 2 )

Using “html5shiv”: Styling the <header> HTML5 Element

Taking advantage of the benefits offered by “html5shiv” is reduced to downloading its source file only if the HTML5 document is viewed with Internet Explorer. This “conditional” download can be achieved in a snap by placing the following code in the document’s <head> section:

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

There you have it. As you can see above, the <script> tag will be parsed only if the web page is rendered using Internet Explorer 8 and below. This simple conditional statement permits us to download “html5shiv” only when using Microsoft’s browser, a process that adds support to the new set of HTML5 elements, including the <header> tag coded in the previous example.

So far, so good. Having “html5shiv” doing the hard work for us, now it’s possible to safely style the <header> element in the following way:

body {
    padding: 0;
    margin: 0;
    background: #000;
    font: 0.8em Arial, Helvetica, sans-serif;
    color: #000;
}
h1 {
    font-weight: normal;
    font-size: 2.1em;
}
h2 {
   font-weight: normal;
   font-size: 1.8em;
}
p {
    margin: 0 0 15px 0;
}
#wrapper {
    width: 500px;
    margin: 0 auto;
    background: #fff;
}
#container {
    padding: 15px;
}
header {
    display: block;
    padding: 15px;
    background: #b9524d;
}

As you can see from the above snippet, I have assigned a few straightforward styles to the <header> selector in order to treat it as a block-level element. Of course, the question that must be spinning in your mind is whether Internet Explorer will recognize the pertaining element as a valid one and will interpret its associated styles too.

Well, as one might expect, the answer is…yes! But, to demonstrate that this is true, we'll have to embed the previous CSS styles (and the “html5shiv” conditional statement) into the HTML5 document that we defined before.

Putting all of the Pieces Together: Showing the Styled Version of the Earlier Web Page

If you want to see if “html5shiv” actually adds HTML5 support to Internet Explorer, you can find the complete version of the web page we coded previously, which (this time) includes the CSS styles defined a moment ago. Check it out:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Example using html5shiv with the header element</title>
<!--[if lt IE 9]>
<script src="
http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
body {
    padding: 0;
    margin: 0;
    background: #000;
    font: 0.8em Arial, Helvetica, sans-serif;
    color: #000;
}
h1 {
    font-weight: normal;
    font-size: 2.1em;
}
h2 {
   font-weight: normal;
   font-size: 1.8em;
}
p {
    margin: 0 0 15px 0;
}
#wrapper {
    width: 500px;
    margin: 0 auto;
    background: #fff;
}
#container {
    padding: 15px;
}
header {
    display: block;
    padding: 15px;
    background: #b9524d;
}
</style>
</head>
<body>
<div id="wrapper">
    <header>
        <h1>Header section</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet.</p>
    </header>
    <div id="container">
        <h2>Generic section</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet</p>
    </div>
</div>
</body>
</html>

That was easy to code and read, wasn’t it? However, you still haven’t seen the funniest part, trust me. To view that, launch Internet Explorer and test the sample web page. If all goes well, the output that you get should be similar to that depicted below:

Effectively, the <header> element has been interpreted and rendered accordingly. This shows in a nutshell that “html5shiv” yield quite impressive results, even when its inner working is a breeze to grab. There’s no need to say that the library creates dynamically other HTML5 elements, aside from the one that you just saw. However, these additional use cases will be discussed in detail in upcoming installments of the series.

Final thoughts

In this first part of the series, I provided you with a humble introduction to what “html5shiv” is and how you can use it for adding HTML5 support to web pages that are visualized on Internet Explorer. While the logic that stands behind the library is amazingly simple and definitively will let you use right away the brand new markup elements bundled with the specification, this benefit comes with a cost that you’ll probably be aware of: from top to bottom, “html5shiv” relies on JavaScript to do its business.

Obviously, this implies that if your carefully-crafted layouts are viewed with Microsoft’s browser and scripting has been disabled, they’ll break up and not in a very graceful way, indeed. Having said that, you’ll have to ponder the pros and cons of using HTML5 on your web pages. My general advice is nothing but common sense: if you’re building a brand new blog and want to use all the bells and whistles of the new standard, then go for them; on the other hand, if you already have a working web site that gets a huge traffic, then be a bit more conservative and enhance it at a slower pace. In the end, the decision is up to you.

But before you make the right choice, it’s necessary to demonstrate that “html5shiv” really makes Internet Explorer support other common HTML5 elements. In line with this concept, in the following tutorial I’ll be setting up another example, which will show how to use the library with the <nav> tag.

As usual, don’t miss the next part!
 

 


DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

blog comments powered by Disqus
HTML ARTICLES

- Does HTML5 Need a Main Element?
- Revisiting the HTML5 vs. Native Debate
- HTML5: Not for Phone Apps?
- HTML5 or Native?
- Job Hunting? Freelancer.com Lists This Quart...
- HTML5 in the News
- Report: HTML5 Mobile Performance Lags
- The Top HTML5 Audio Players
- Top HTML5 Video Tutorials
- HTML5: Reasons to Learn and Use It
- More of the Top Tutorials for HTML5 Forms
- MobileAppWizard Releases HTML5 App Builder
- HTML5 Boilerplate: Working with jQuery and M...
- HTML5 Boilerplate Introduction
- New API Platform for HTML5

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials