What are most useful media=“print” specific, cross

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

Please 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 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}

Answer 2

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. There 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 3

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

Answer 4

In the spirit of sharing, here's a couple of rules I regularly use. They fit in well with SemanticUI, but may be helpful elsewhere

[class*="printed only"] {
    display:    none;
}

@media print {
    .printed {
        display:    initial !important;
        opacity:    1 !important;
    }

    [class*="non printed"] {
        display:    none !important;
        opacity:    0 !important;
    }
}

Display on screen and print

Use class="printed". This is handy when you have tabs in your UI, so you can force them to be printed even if they aren't currently being displayed

Display on screen but don't print

Use class="non printed". This is handy for navigation elements and other stuff you don't want to print

Don't display on screen but print

Use class="printed only". I find it handy to include some metadata about a webpage on the printed version that might be irrelevant to the web version - eg the date/time the page was generated, the username of the person that printed the document, a link (if removed from headers) and soforth.