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 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) ") ";
   }