HTML5 Element Printing in Internet Explorer

By  on  

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

  • By
    Welcome to My New Office

    My first professional web development was at a small print shop where I sat in a windowless cubical all day. I suffered that boxed in environment for almost five years before I was able to find a remote job where I worked from home. The first...

  • By
    CSS @supports

    Feature detection via JavaScript is a client side best practice and for all the right reasons, but unfortunately that same functionality hasn't been available within CSS.  What we end up doing is repeating the same properties multiple times with each browser prefix.  Yuck.  Another thing we...

Incredible Demos

  • By
    Full Width Textareas

    Working with textarea widths can be painful if you want the textarea to span 100% width.  Why painful?  Because if the textarea's containing element has padding, your "width:100%" textarea will likely stretch outside of the parent container -- a frustrating prospect to say the least.  Luckily...

  • By
    Degradable SELECT onChange

    Whenever I go to Google Analytics I notice a slight flicker in the dropdown list area. I see a button appear for the shortest amount of time and the poof! Gone. What that tells me is that Google is making their site function...

Discussion

    Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!