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.
No comments:
Post a Comment