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.


 


 

Comments (0)

Skip to main content