There's been a lot of commotion over the last week since the W3C announced that <a href="http://www.infoworld.com/d/developer-world/w3c-hold-html5-in-websites-041?page=0,0">HTML5 is not ready yet for deployment to websites</a>. Some really <a href="http://remy.tumblr.com/post/1261575750/hold-off-on-deploying-html5-in-websites">smart</a> <a href="http://almaer.com/blog/dont-deploy-html5-thanks-again-w3c">people</a> have weighed in on this topic and I agree with their thoughts. Last Thursday, I did a presentation on the new features of HTML5 and part of that was demonstrating how polyfills work to allow you to leverage these new features while still providing a good cross-browser experience.

What's a Polyfill?

I really love Paul Irish's definition since it sums it up perfectly:

<blockquote>polyfill: A shim that mimics a future API, providing fallback functionality to older browsers.</blockquote>

The basic premise is that most older browsers may not have all of the features of the HTML5 specification and they need a helping hand to make them provide a good user experience. A great example of this are the new HTML5 semantic tags like &lt;article&gt;, &lt;section&gt;, &lt;header&gt; & &lt;nav&gt; which render fine in all major modern browsers like IE9 beta, Firefox, Chrome, Safari & Opera but lack support in popular browsers like IE6 through IE8. 

So for my demo, I decided to create a simple page that showed a blog-like layout using these new tags while ensuring that they can still render correctly in IE8. Here's the layout code I used. 

[code lang="html"]
&lt;!doctype html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;utf-8&quot; /&gt;
    &lt;title&gt;Rey's Awesome HTML5 Blog&lt;/title&gt;
    &lt;meta name=&quot;description&quot; content=&quot;&quot; /&gt;
    &lt;meta name=&quot;keywords&quot; content=&quot;&quot; /&gt;
    &lt;meta name=&quot;author&quot; content=&quot;&quot; /&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width; initial-scale=1.0&quot; /&gt;
     
    &lt;!-- !CSS --&gt;
    &lt;link href=&quot;css/html5reset.css&quot; rel=&quot;stylesheet&quot; /&gt;
    &lt;link href=&quot;css/style.css&quot; rel=&quot;stylesheet&quot; /&gt;
  
&lt;/head&gt;
 
&lt;body&gt;
    
	&lt;header&gt;
        &lt;h1&gt;Rey's Awesome HTML5 Blog&lt;/h1&gt;
	&lt;/header&gt;

    &lt;nav&gt;
    	&lt;ul&gt;
			&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
			&lt;li&gt;&lt;a href=&quot;#&quot;&gt;About&lt;/a&gt;&lt;/li&gt;
			&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Contact&lt;/a&gt;&lt;/li&gt;
		&lt;/ul&gt;
    &lt;/nav&gt;
    	
	&lt;section&gt;

        &lt;header&gt;
        &lt;h1&gt;Rey's Blog Posts&lt;/h1&gt;
	    &lt;/header&gt;

        &lt;article&gt;
            &lt;header&gt;&lt;h1&gt;The In's &amp; Out's of HTML5&lt;/h1&gt;&lt;/header&gt;
		    &lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing  elit. Fusce vitae orci. &lt;/p&gt;

            &lt;footer&gt;
                October 7, 2010 - comments( 0 )
            &lt;/footer&gt;
        &lt;/article&gt;

        &lt;article&gt;
            &lt;header&gt;&lt;h1&gt;HTML5 Ate My Lunch&lt;/h1&gt;&lt;/header&gt;
		    &lt;p&gt;Fusce vitae orci. Lorem ipsum dolor sit amet, consectetuer adipiscing  elit. &lt;/p&gt;
            &lt;footer&gt;
                October 5, 2010 - comments( 3 )
            &lt;/footer&gt;
	    &lt;/article&gt;		

	&lt;/section&gt;
		
	&lt;footer&gt;
		&lt;p&gt;Copyright Rey Bango, 2010&lt;/p&gt;
	&lt;/footer&gt;

&lt;/body&gt;
 &lt;/html&gt;
[/code]

I used a <a href="http://html5doctor.com/html-5-reset-stylesheet/">HTML5 reset style sheet</a> because unfortunately, most browser don't have an internal style sheet that sets the expected behavior for specific elements. For example, you would expect an &lt;section&gt; element to be block level but due to a lack of the internal browser style sheet, it renders inline. 

[code lang="css"]
/* Global */
body { font-size: 16px; font-family: arial,helvetica,clean,sans-serif;  }
a { color : #33CC33; } 
a:hover { text-decoration: none; }

/* Header */
header h1 { font-size: 48px; }

nav { overflow: auto; margin-bottom: 25px; }
nav li {float:left; padding-right: 5px; }

/* Main Content Area */
section { width: 500px; font-size: 12px; }
section h1 { font-size: 16px; }

article { background: #CCCC99; margin-bottom: 10px; padding: 5px; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; }
article footer { text-align: right; margin-right:5px; } 
article h1 { font-size: 12px; }
[/code]


<a href="http://blog.reybango.com/wp-content/uploads/2010/10/fx-blog.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/10/fx-blog-300x180.png" alt="" title="fx-blog" width="300" height="180" class="alignleft size-medium wp-image-1429" /></a>

