SYSK 245: Are You Using the ‘media’ Attribute In Your CSS?
Did you ever copy and paste some content from a web page into a Word document, just so you can remove the navigation column, or may be remove a header or footer before you print it? I have… many times… And it’s all because those web sites do not take into consideration that presentation can take many forms – not just the computer screen. Why not make your web pages adaptable to other mediums like a screen projector, and a printer…
Here are some suggestions for starters:
1. Use media attribute in your style elements, e.g.
<style type="text/css" media="screen">
<style type="text/css" media="print">
or add @media block in .css file, e.g.
@media print {
#nav-area {display: none;}
}
In CSS you can also use @import at the start of a stylesheet to import another stylesheet from a URL, specifying the media type.
2. Create a header and footer for each type of media, e.g.
#header {
display:none;
}
#printheader {
height:100px;
background:#fff;
font-size:18pt;
color:#000;
border-bottom:1px solid #000;
}
#footer {
display:none;
}
#printfooter {
height:40px;
background:#fff;
color:#000;
text-align:right;
font-size:10pt;
border-top:1px solid #000;
margin-top:16px;
}
3. Remove navigation areas from print and, if makes sense, from projection media (example above)
4. Add page break rules for print media, e.g.
h1 {
page-break-before: always;
}
5. Add page numbers for for print media, e.g.
#print-foot:after {
content: counter(page);
counter-increment: page;
}
6. Make sure you use white background on print media, e.g.
html {
padding:0;
margin:0;
border:0;
background:#fff;
font-size:10pt;
font-family: arial, sans-serif;
}
If you have other “best practices” on this topic you’d like to share, don’t hesitate to post them as comments.
