HTML5 Element Printing in Internet Explorer

By David Walsh on February 27, 2012

I was recently working on a website created with HTML5 elements like header, footer, section, and more, and got a rude awakening by Internet Explorer 8. I knew about the hack to ensure the elements render and style as they should on screen...

// For discussion and comments, see: http://remysharp.com/2009/01/07/html5-enabling-script/
(function(){if(!/*@cc_on!@*/0)return;var e = "abbr,article,aside,audio,bb,canvas,datagrid,datalist,details,dialog,eventsource,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,time,video".split(',');for(var i=0;i<e.length;i++){document.createElement(e[i])}})();

..but ensuring styling during print was a whole different story. Despite the JavaScript shim above, the elements still wouldn't style correctly when I went to print. After trying a variety of solutions, my last attempt was the most successful; Modernizr's "print-shiv" extra! This shim wraps your HTML5 elements with printer-friendly elements during the onbeforeprint event, then cleans up after itself when the onafterprint event is fired. There are no special configurations to set, simply include the JavaScript file within the page. Just wanted to pass this quick tip on; head over to GitHub and download it!

Recent Features

Chris Coyier’s Favorite CodePen Demos
Chris Coyer's incredible CodePen is much more than your typical code'n'share site. CodePen features the end result more than the code, provides loads of collaboration tools, and seems to be pushing new features every week. But what...
Page Visibility API
One event that's always been lacking within the document is a signal for when the user is looking at a given tab, or another tab. When does the user switch off our site to look at something else?...
Animating CSS3 Transforms with MooTools Fx
I recently posted an awesome (if I may say so myself) CSS3 / MooTools tutorials called Create a Photo Stack Effect with Pure CSS Animations or MooTools. The post presented two ways, a pure CSS method or MooTools-powered class,...

Incredible Demos

Printing MooTools Accordion Items
Sometimes we're presented with unforeseen problems when it comes to our JavaScript effects. In this case, I'm talking about printing jQuery and MooTools accordions. Each "closed" accordion content element has its height set to 0 which means...
MooTools 1.2 OpenLinks Plugin
I often incorporate tools into my customers' websites that allow them to have some control over the content on their website. When doing so, I offer some tips to my clients to help them keep their website in good...
JavaScript and CSS Spinners with spin.js
I think it's safe to say the days of using images to provide the "small touches" are over. We can now safely create gradients, drop shadows, rounded corners, and scaled, rotated, transformed animations. It seems...

HTML5 Element Printing in Internet Explorer

Discussion