HTML and CSS Reference
In-Depth Information
Finally, in
default.html
add a sibling
DIV
element for each print scenario you intend to support.
Here's how:
<body>
<div id="main">
...
</div>
<div id="print-template1">
...
</div>
<div id="print-template2">
...
</div>
</body>
The user interface goes in the
main
DIV; content you want to be able to print goes in the other
DIV
elements. You now need to ensure that when the application is running normally and not printing,
the print sections are hidden. Likewise, you want to hide the application UI content and display the
appropriate content when the application is going to print.
The print media
Web browsers have supported screen and print media for a long time. When you author an HTML
page, you can link distinct CSS style sheets for screen and print using the
media
attribute on the
STYLE
and
LINK
elements. For example, the following code links the
screen.css
file when the page
is being displayed and automatically (and silently) switches to the
print.css
when the page is being
printed.
<link rel="stylesheet" href="screen.css" media="screen" />
<link rel="stylesheet" href="print.css" media="print" />
If you don't specify the
media
attribute, it is assumed to have a value of
all
, meaning that the style
sheet will be applied in all cases.
In the current exercise, you want to hide the
print-template1
and
print-template2
sections in screen
mode; similarly, you want to hide the
main
section when the page is being printed. You can easily
achieve this using the
media
attribute.
To keep it as simple as possible, you'll work with the
STYLE
element. The
STYLE
element allows you
to insert style information inline rather than referencing it from an external file.
<style media="print">
#main {
display: none;
}
Search WWH ::
Custom Search