As CSS becomes more and more popular and Web designers are using it more and more to develop the look of their Web sites, browsers are causing more and more problems when trying to print Web pages. CSS styles do not always translate nicely when printed. Some browsers actually freeze or crash when using specific CSS style definitions.
How Do I Avoid These Issues?
To avoid these issues, you can develop a print style sheet. There are two different ways of developing print style sheets. Both methods have essentially the same effect.
To make simple changes to the styles of your pages, you can declare a portion of your standard style sheet to be rendered only when printing. To do that, you would enclose all of your printer-specific style definitions within the following tags:
@media print {
}
Some examples of things you may want to do using that method would be to change the standard font used on your page or to remove any background images you are using. For instance, you could use the following code to make some very simple changes to your page when it is printed:
@media print {
body {
background: #fff;
font-family: serif;
color: #000;
}
}
The other method you can use is to develop a completely separate printer style sheet. Generally, this is the best method to use when you are making drastic changes to the look or layout of your page. To do so, you simply create an entirely new style sheet (for instance, print.css). Then, in the head of each of your HTML documents, you include a special link tag to include that style sheet when printing your pages. That link tag would look something like:
<link rel="stylesheet" href="print.css" media="print" type="text/css" />
How Do I Choose Which Method to Use?
Ultimately, only you know which method is the best for you to use. However, one thing you need to consider is:
How much of my page layout do I need/want to change before the user prints my Web page?
If you plan to change only a few minor things, such as the font family, font color, page background, page width, etc. then the best method is probably to include the style definitions in your standard style sheet. This will help save a little bit of bandwidth over time, as the user will have already loaded the style definitions (having cached the whole style sheet) when they print.
However, if you plan on making a lot of changes (like removing your entire header or navigation menu, rearranging items on the page, etc.), you probably want to create a completely separate style sheet. This will reduce the total page weight for each of your pages, as the browser will not attempt to load that information each time the user views the page on their screen. The style sheet will only be loaded when the user actually chooses to print the page.
What Else Should I Consider?
One more thing you need to consider when making adjustments with a printer style sheet is how Web-savvy your visitors are. If your typical visitor does not understand computers very well, you most likely do not want to change your page drastically using a printer style sheet. Instead, you should consider offering a “printable” alternative (a completely separate Web page with the same content, but a very basic layout – generally just the site’s logo and the content itself) to them.
In a case where your visitors are not extremely Web-savvy, it can be rather unnerving to go to print a Web page and find that the result looks nothing like what they saw on the screen.