HTML and CSS Reference
In-Depth Information
All modern browsers support printer styles, which would seem to suggest that the
practice of inserting a special “print format” button is obsolete. However, the sense of
“what you see is what you get” is important to users, so it is a good idea usability-wise to
allow the user to easily preview the printed page.
A printer style sheet may be used to format content quite differently. Commonly, certain
browser-specific features like navigation elements may be removed, usually accomplished
using the
display
property. URLs may be written out next to embedded links. For printer
styles, font sizes and layout may be changed to more appropriately fit paper consumption
which may include resorting to completely different measurement units than what is used
onscreen.
Alternative Styles
The opportunity to have different looks for different situations is an aspect often mentioned
about CSS but rarely seen. The easiest way to illustrate this is through alternative style
sheets. In a number of browsers, it is possible to then change the look of a page by selecting
an alternative style. To insert different styles, use a
<link>
tag and set the
rel
attribute
equal to “
alternate stylesheet
.” You will also need to set the
title
attribute for the tag so
that the browser can present a choice for the user. Three examples are shown here:
<link rel="stylesheet" href="standard.css" title="standard">
<link rel="alternate stylesheet" href="orange.css" title="Happy Halloween">
<link rel="alternate stylesheet" href="greenandred.css" title="Merry
Christmas">
A browser that supports the selection of alternative style sheets would then present the
possibility of choosing a different look to the user, as shown under the menu selection here:
