O'Reilly

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!

Treehouse Learning

Recent Features

Incredible Demos

  • Drag and Drop MooTools File Uploads

    Honesty hour confession:  file uploading within the web browser sucks.  It just does.  Like the ugly SELECT element, the file input is almost unstylable and looks different on different platforms.  Add to those criticism the fact that we're all used to drag and drop operations,...

  • Drag &#038; Drop Elements to the Trash with MooTools 1.2

    Everyone loves dragging garbage files from their desktop into their trash can. There's a certain amount of irony in doing something on your computer that you also do in real life. It's also a quick way to get rid of things. That's...

Discussion

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