• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Strategies for Debugging Print CSS
 

Strategies for Debugging Print CSS

on

  • 7,493 views

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

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

Statistics

Views

Total Views
7,493
Views on SlideShare
7,492
Embed Views
1

Actions

Likes
0
Downloads
12
Comments
0

1 Embed 1

https://twitter.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Strategies for Debugging Print CSS Strategies for Debugging Print CSS Presentation Transcript

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