Important notice

Please note that this blog is discontinued here. All the posts are also coppied to my new blog at http://boris.gomiunik.net.
Important: Due to large amount of comment spam further commenting has been disabled here. If you wish to send me a comment, plase look up the same post on my new blog and leave comment there. Thanks!

1/15/2007

CSS for different output (handhelds, print,...)

Thanks, Jose, for a good question. I've done some more digging and as a mater of fact we can make specific CSS according to the device the page is intended for. We can define CSS for different outputs, like handhelds, printing, screen, even projectors, etc. using the media type. Below's an example for first inserting the CSS for all output and then additionally adding the separate CSS for printing.

<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="printing.css" media="print">
</head>
<body>
...
Another method is in the CSS itself. Below is an example of writing specific styles for handheld devices and printing inside of the CSS file.

<style type="text/css">
@media = print, handheld {
h1 { font-family: Arial; font-size: 0.8em; }
}

As seen in the example above, the Heading 1 is going to be with font Arial and size 0.8em. 

Which options you have for output (most common used in bold):

  • all - for all media type devices
  • aural - for speech and sound synthesizers
  • braille - for braille tactile feedback devices
  • embossed - for paged braille printers
  • handheld - for small or handheld devices
  • print - for printers
  • projection - for projected presentations, like slides
  • screen - for computer screens
  • tty - for media using a fixed-pitch character grid, like teletypes and terminals
  • tv - for television-type devices

(source for above: W3Schools)

Even though there is a way to distinguish CSS for IE and other browsers, detecting them is a whole another story.

Technorati tags: , ,

No comments: