Manuel Matuzovic rediscovers @media print {} styles.
The first thing he shows in this article is a tweet by Aaron Gustafson in which Indiegogo’s website is pretty jacked up for print. It basically looks like a site in which none of the CSS loads at all, which is probably because they wrap all their styles in @media screen {}, or use <link rel="stylesheet" media="screen" href="style.css">. That’s fine if you intend to take a “start from scratch” approach to print styles. I generally prefer just not scoping screen styles and using a couple of print-scoped overrides (a “blacklist” instead of a “whitelist”).
Manuel pointed out that you can use Chrome DevTools to emulate print media, which is pretty dang useful! Here’s a quick video of that:
That screenshot of Indiegogo’s site also goes to show how inline SVG (or any images, I suppose) can get a little crazy if you don’t include any sizing information in the HTML. That prompted this tip:
good plan:
<svg width=“20px” height=“20px” … >
you can easily override with CSS and it prevents… (see image)https://t.co/TcgKHL0R60
— Chris Coyier (@chriscoyier) November 17, 2016
Even if CSS does load and size those SVG’s correctly, it might be helpful to have them sized approximately correct to begin with, to avoid what Sara Soueidan has dubbed ‘Flash of Unstyled SVG’.
Remember that attributes like width and height are extremely easy to override in CSS. Setting them at all in CSS will override them. They aren’t like inline styles.
Manuel’s article is loaded with 12 other hot tips on things to include in a print stylesheet that you might not think of: preventing orphans, forcing colors to print correctly, displaying otherwise-hidden content, providing alternate content for things that won’t print correctly, etc. Couple of other tips here.