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.