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

Upcoming Events

Recent Features

  • 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...

  • Introducing MooTools Templated

    One major problem with creating UI components with the MooTools JavaScript framework is that there isn't a great way of allowing customization of template and ease of node creation. As of today, there are two ways of creating: new Element Madness The first way to create UI-driven...

Incredible Demos

  • AJAX For Evil:  Spyjax with jQuery

    Last year I wrote a popular post titled AJAX For Evil: Spyjax when I described a technique called "Spyjax": Spyjax, as I know it, is taking information from the user’s computer for your own use — specifically their browsing habits. By using CSS and JavaScript, I...

  • Introducing MooTools NextPrev

    One thing I love doing is duplicating OS functionalities. One of the things your OS allows you to do easily is move from one item to another. Most of the time you're simply trying to get to the next or the previous item....

Discussion

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