I’m working on a site that has to look good in IE7 as well as modern browsers and also must have a nice print stylesheet. We’re using the Zurb Foundation framework to build the site and trying to take advantage of as many modern techniques as possible, while gracefully degrading for older browsers.
We’ve had few problems and generally the tools that are around today make this methodology absolutely the right way to go. However, when I hit Print Preview in IE7 I had a nasty surprise! It was terrible.
After much gnashing of teeth, swearing, coffee and a good night’s sleep we have come up with two top tips if your working with HTML5 and want things to print nicely.
1. Box-sizing must be Content-box
We’re using a box-sizing shim to get the Zurb Foundation framework working in IE7. It’s not perfect but it does the job. However, that shim doesn’t do a good job of laying out the print version of the page The solution to that is to have an IE only stylesheet with this in
@media print{
* {
box-sizing: content-box;
*behavior: url(/js/box-sizing.htc);
}
}
2. Use the new HTML5Shim file
We’ve been using the standard Google Code URL to include the HTML5 shiv in our projects:
http://html5shim.googlecode.com/svn/trunk/html5.js
Through trial and error we concluded that HTML5 elements were not being styled in print mode. We noticed that the file on Google is at version pre3.6, but if you check the project on GitHub there is a new 3.6.2pre release that explicitly states support for printing:
https://github.com/aFarkas/html5shiv/blob/master/src/html5shiv-printshiv.js
Drop that file in place instead of the old copy and hey-presto! It works! I assume the new version will make its way to Google Code in the near future, but in the mean time if you need print support right now, go grab the code from GitHub!
