CSS styles can be selectively applied based on the medium on which rendering is going to happen. This is controlled by the media attribute when applying the style. For example it's a very common requirement that we should see the Print button the main screen but should not see it on the printed document. This can be controlled by defining different styles and applying them selectively. For example let's say the standard style sheet is
standard.css (Just for completeness, I am putting this style, this can be skipped also)
.printNoDisplay
{
}
Also let's define another css file for printing
print.css
.printNoDisplay
{
display:none;
}
Now the main html document would look like
<html>
<head>
<link rel="stylesheet" type="text/css" media="print, screen"
href="<LocationOfCSS>/standarad.css"/>
<link rel="stylesheet" type="text/css" media="print"
href="<LocationOfCSS>/print.css"/>
</head>
<body>
<div class="printNoDisplay">
<form class="textAlignCenter">
<input type="button" value=" Print" onclick="window.print();return false;" />
</form>
</div>
</body>
</html>
Note the usage of media on the linking of css. In the print document the printNoDisplay style defined in print.css will kick in and will disable the displaying of button.
We can apply the style in the same css also. In this case define printNoDisplay in standard.css as follows and no need for print.css
@media .printNoDisplay
{
display:none;
}
Various media types that are supported by CSS are:
- all - Default value, applies to all devices.
- print - Printed document
- braille - Braille devices
- embossed - Embossed braille printers
- handheld - Handheld devices like mobile phones
- projection - projector
- screen - Out standard web browser.
- speech - Speech synthesizers for hearing impaired.
- tty - Good old dumb terminals.
- tv - television
No comments:
Post a Comment