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

Question

What are the most useful media="print"-specific, cross-browser-compatible CSS properties?
I think we have these 5 properties for print specific.
page-break-before
page-break-after
page-break-inside
widows
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 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 2

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