What are most useful media="print" specfic ,cross browser compatible css properties?

Question

What are the most useful media="print"-specific, cross-browser-compatible CSS properties?

I think we have these 5 properties for print specific.

1. page-break-before
2. page-break-after
3. page-break-inside
4. widows
5. orphans

Pls explain when and where to use these? Which are cross browser compatible? and what are other common CSS properties can be useful in print, other than display:none?

Answer 1

I use the famous A list apart article (CSS Design: Going to Print) and this article when I need to make a printable version of a page. here are some common tags, but a lot depends on the css model (as well as container padding and margins) you are using:

body {
   background: white;
   font-size: 12pt;
   }
#menu {
   display: none;
   }
#wrapper, #content {
   width: auto;
   margin: 0 5%;
   padding: 0;
   border: 0;
   float: none !important;
   color: black;
   background: transparent none;
   }
div#content {
   margin-left: 10%;
   padding-top: 1em;
   border-top: 1px solid #930;
   }
div#mast {
   margin-bottom: -8px;
   }
div#mast img {
   vertical-align: bottom;
   }
a:link, a:visited {
   color: #520;
   background: transparent;
   font-weight: bold;
   text-decoration: underline;
   }
#content a:link:after, #content a:visited:after {
   content: " (" attr(href) ") ";
   font-size: 90%;
   }
#content a[href^="/"]:after {
   content: " (http://www.alistapart.com" attr(href) ") ";
   }

Answer 2

Chris Coyier at css-tricks.com wrote a great article on this: http://css-tricks.com/css-tricks-finally-gets-a-print-stylesheet/

Answer 3

I use the following:

 /* Browser will TRY to avoid spanning content within across a page */
 tr, td, th {page-break-inside:avoid}

 /* Repeat table headers when table spans a page */
 thead {display:table-header-group}

  /* Apply to anything you don't want to print */
 .NoPrint {visibility:hidden; display:none}