Strategies for Debugging Print CSS

9,453 views

Published on

Here's the best way (I know how) to debug Print CSS without killing a million trees (or your sanity).

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
9,453
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
13
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Strategies for Debugging Print CSS

  1. 1. Strategies for Debugging Print CSS<br />Sean Hannan<br />Johns Hopkins University<br />
  2. 2. Whyyyyyyyyyyyyyyyyyy?<br />Print CSS can be frustrating as all get-out to get right.<br />I just banged my head against a wall doing this, so I’d like it if others didn’t have to share the same fate. Ya feel me?<br />
  3. 3. Open yer Toolbox<br />Firebug (http://getfirebug.com/)<br />Web Developer (http://chrispederick.com/work/web-developer/)<br />Your browser of choice (probably Firefox or Chrome)<br />
  4. 4. Here’s how ya do it.<br />
  5. 5. Step Eins.<br />Use Web Developer to switch to the print styles.<br />
  6. 6. Step Dos.<br />Load up your print CSS file.<br />
  7. 7. Step Trois.<br />Turn on ‘Persist Features’. That way, you can edit CSS in your editor, save, and hit refresh in your browser, and you won’t have to go through steps one and two again. Handy, huh?<br />
  8. 8. Get dem bugs.<br />Now your browser will display the page somewhat like how it will when it prints out.<br />I say somewhat because depending on the complexity of your site, the browser will display some things in print that shouldn’t really happen.<br />To double check reality, Print Preview that sucker.<br />
  9. 9. Get more of dem bugs.<br />Now, it’s just a matter of using Firebug (like ya do) to identify your selectors and play with how they should look in hardcopy.<br />
  10. 10. Layout/Styling Considerations<br />Strip out anything interactive. You can’t click on a piece of paper. (use display: none;)<br />Drop the color down to black and white (unless you’re a jerk that likes to waste ink).<br />Whitespace and border: 1px solid black are your friends.<br />Bump up font-size a ‘lil bit. Your clients’ eyes will thank you.<br />
  11. 11. !important is muyimportante<br />So you’ve made some changes to the CSS, but they don’t seem to take effect. Shift+F5 does nothink.<br />!important will override all style rules (even inline ones).<br />Ex: div {border: 1px solid black !important;}<br />Force your way to nice printouts through urgency.<br />
  12. 12. :after {content} is king<br />You may loose some visual distinction when you remove colors and borders. Text runs together with no break. Uh oh Spaghetti-Os.<br />Identify the offending elements and see if you can’t separate them with some text.<br />Ex: ul.inlinelistli:after {content: “, ”;}<br />A comma here, a colon there. Does wonders. <br />
  13. 13. Rewind, selector.<br />One thing that can help with your layout is a reset.<br />Use one of the standard CSS resets out there (like Eric Meyer’s: http://meyerweb.com/eric/tools/css/reset/)<br />Or toss this little ditty at the end of your CSS file:<br />
  14. 14. * {<br /> padding: 0 !important;<br /> margin: 0 !important;<br /> border: 0px !important;<br />}<br />
  15. 15. That’s it.<br />Questions? Comments? Hit me up on Twitter (@MrDys).<br />

×