CSS properties are designed for a variety of media such as braille, handheld, projected presentations, including printers.
When printing a Web page can often not include the URL’s behind those links. A little bit of CSS can help by using the print @media type property.
[css] @media print {a[href]:after {
content: ‘ [‘ attr(href) ‘]’;
}
}
[/css]
The above code allows for displaying the URL behind a link on the printed page, while hiding it when shown on the screen.
With a little bit of CSS3, the future successor of CSS2, the printed page can be customised with a little bit in more added details:
The browser must be able to handle CSS2 to use this function. The most recent versions of Mozilla and Opera are capable of that.
[css] @media print {a[href^=”http://”]:after, a[href^=”ftp://”]:after {
content: ‘ [‘ attr(href) ‘]’;
}
}
[/css]
Other Media Types include:
- all (Used for all media type devices)
- aural (Used for speech and sound synthesizers)
- braille (Used for braille tactile feedback devices)
- embossed (Used for paged braille printers)
- handheld (Used for small or handheld devices)
- print (Used for printers)
- projection (Used for projected presentations, like slides)
- screen (Used for computer screens)
- tty (Used for media using a fixed-pitch character grid, like teletypes, terminals)
- tv (Used for television-type devices)