Creating a Print Style Sheet - Beginning CSS3 - page 374

your results might not look exactly the same as the screen shots in this exercise because they depend on
your printer settings and paper size. My printer uses A4 paper.
if you need to support iE 8, use the single-colon versions of the ::after and ::before pseudo-elements.
Summary
In some respects, print styles are the poor relation of the CSS family. Browsers haven't given them a great deal
of attention, and the CSS3 Paged Media module remained inactive for a long time. In spite of the problems, it's
important to add print styles to a website, particularly for pages—such as invoices and sets of instructions—that
are likely to be printed.
Most of the styles used in a print style sheet use the same properties as for layout in a visual browser. Printers
rely on physical measurements, so it's best to specify font sizes in points rather than pixels ( 1px = 0.75pt ), and to
use inches, centimeters, or picas for margins. The print-specific properties are concerned with where and how
to implement page breaks. They should be regarded as indicating only the desirable outcome rather than laying
down hard and fast rules.
Use the media attribute or @media rules to specify which devices should use the styles. Of the many media
types, the only ones you are likely to use are screen (for visual browsers) and print (for printers).
You can use the cascade to create print-specific styles that override the main style sheet, but it's usually
easier to maintain separate style sheets for visual browsers and printers. Make a copy of the existing style sheet,
and then go through it removing styles that are irrelevant to the printed page, and editing others to improve the
printed layout. Keep the styles mutually exclusive by attaching the original style sheet using media="screen"
and the print one using media="print" .
In the next chapter, you'll learn about CSS3 media queries, which extend the media attribute to allow you to
serve specific styles to devices depending on such features as screen width, resolution, and orientation. Media
queries are supported by all modern browsers, but not by IE 8 and earlier. More significantly, they're supported
by the browsers used in smartphones and tablets, making them an important tool in responsive web design for
mobile devices.