Categories:

CSS Media types and printer friendly pages

"Surfing the web" has traditionally meant staring at a computer monitor, though things are changing, and quickly. As the web evolves, it is becoming a lot more diverse, accessible to devises even Al Gore probably couldn't have predicted. We're all familiar with printing a page for offline viewing, though the support is now in place to make webpages viewable in handhelds, projection screens, TVs, for people with disability, and more. All this is great, but it doesn't just happen on its own. Conscious effort has to be made by us, the webmaster, to add this support, and one exciting way is through CSS. In this tutorial I'll discuss media types in CSS, and more specifically, how CSS can be used to transform ordinary webpages to become printer friendly. 

CSS Media Types

Media refers to the type of device used to display a webpage, such as a computer screen. With more and more non traditional devices such as a handheld, a cell phone or even your watch wanting to access the web, designing your web site becomes more than just a browser game. You want your webpage to look good across multiple devices. Luckily the process is no where as daunting as it may appear, with CSS level 2's support for media types being among the simple tools you can use to help make your site view-friendly across mediums.

As of CSS-2, the following 10 media types are supported:

Media Type Description
all

Suitable/intended for all devises (default).
aural

Intended for speech synthesizers.
braille

Intended for braille tactile feedback devices.
embossed

Intended for paged braille printers.
handheld

Intended for handheld devices (typically small screen, monochrome, limited bandwidth). 
print

Intended for printed documents (applies to docs viewed in print preview mode too).
projection Intended for projected presentations (ie: projectors or print to transparencies).
screen Intended for computer screens.
tty Intended for media using a fixed-pitch character grid (ie: teletypes or terminals).
tv Intended for television-type devices.

Some of the above items may appear unfamiliar to the average webmaster, such as Braille, which reads text from the screen to the user (ie: useful to a blind person).

- 3 ways of specifying CSS Media types

There are 3 ways to attach a media type to the style sheet, so our CSS is applied only when a particular media (ie:  handheld) is used to view the page:

1) Linked style sheets:

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

With the above declaration, "print.css" will only be applied to the page when it's printed (or viewed in Print Preview mode in your browser). You can add additional linked style sheets targeting other media types as well.

As a side note, for XML documents, the equivalent of the above would be:

<?xml-stylesheet type="text/css" media="print" href="print.css" ?>

2) Imported style sheets:

<style type="text/css" media="print, handheld">
@import "basic.css";
</style>

Imported style sheets used here has the advantage of being conditionally downloaded, meaning the style sheet will only be downloaded if the devise matches that specified in the media attribute. In low bandwidth devices such as a handheld, any savings in unnecessary bandwidth could be significant. The disadvantage of this technique at present is  the lack of browser/device support relative to technique 1) above. 

3) Inline style sheets, through the @media rule:

<style type="text/css">
@media projection{
  body{ background-color:#FFFFFF; }
  #heading{ font-size:28px; }
}
</style>

As you can see, whatever CSS declarations you wish be applied only for "Projection" should be wrapped around in the @media block.