TIPS - CSS: Professional Techniques for Modern Layout - page 85

PRINT STYLES
If you aren't creating styles for print, now might be a good time to consider it. Even if you
want your site to look basically the same on page as on-screen, you can still take the opportu-
nity to optimize the color contrast for what will very likely be grayscale output with no
background colors or images whatsoever.

It's easy to do. You can associate them with the page in three ways:

< style type="text / css" media="print">…< / style>
< link type="text / css" rel="stylesheet" media="print"
href="print.css">
@ import url(print.css) print;

Almost everyone uses the link approach. h is is because embedding a print style sheet in
every page is pretty inei cient, and importing a print style sheet requires embedding a style
sheet in every page. Also, there were browser bugs around print-specii c imported style sheets
that lasted for a very long time.

h e print style sheet itself is where you can do things like unset image-replacement ef ects
(see preceding section). It's also a very good idea to make sure all your text is dark in shade,
because white text on a dark background will almost inevitably become white text on a white
piece of paper, and that's just really hard to read.

87

h is happens because background images and colors are almost never printed. h e option to
do so exists in every modern browser, but the default setting is not to print backgrounds,
which, when you think about it, is a really good default. (Imagine the ef ect on your printer's
ink cartridge if you printed out ten pages of white text on a navy blue background.) Almost
nobody ever changes the setting, so you have to assume that no backgrounds will show up in
print. h erefore, it's a good idea to just remove them in your print styles.

You can do that in a broad, sweeping way:

* { background : transparent ; color : black ;}

…or you could list out all the elements that need to be adjusted, something like this:

body , #navbar , #aside , .warning , .blockquote {
background : transparent ; color : black ;}

DEVELOPING PRINT STYLES
So what's the best way to develop print styles? Right there in the browser, unless of course
you'd rather select Print Preview… about a kajillion times. Here's how it works.