CSS. Attributes of print documents

Here’s the print-medium style sheet that A List Apart was using once the float bug was cleared away:

#menu { display: none; }

#wrapper,

#content { width: auto; border: 0; margin: 0 5%; padding: 0;

float: none!important; }

It’s a good start. This style sheet removes the right-side menu completely from the document, so it isn’t printed (display: none;), and resets the margins and padding of the article’s content so that the text will flow from one side of each page’s printable area to the other.

The problem, as I saw it, was that too many of the styles intended for the screen were leaking through to the print.

If we look at the head of a recent ALA article, we find (among a lot of other stuff) the following lines:

<style type="text/css" media="all"> @import "nucss2.css";</style>

<link rel="stylesheet" type="text/css" media="print" href="print.css" />

We have a style sheet, print.css, which has been restricted to the print medium with the use of the attribute media. The style sheet nucss2.css, which is being imported in order to hide it from Navigator 4.x, will be used in all media the user agent supports. That’s screen, print, projection, aural—you name it. Unless we’re careful, we could end up with background colors and pixel-based font sizes in our printed output.

Is this a tragedy? No, but most browsers are configured not to print backgrounds; and pixel-based fonts, while nice for screen media, are not so useful in print media.