What Are Most Useful Media="Print" Specific, Cross Browser Compatible CSS Properties

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

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

How to get cross browser compatibility in Print on page from all browsers?

Identical results are impossible. The output depends not only on CSS but also on individual settings for page margins, the printer’s capabilities, available fonts, paper format (A4 vs US Letter) and probably a lot more.

For CSS

• Avoid floats and positioning (relative, absolute and fixed). Especially Mozilla (Firefox) can not handle those properties very well.
• Use page-break-* but don’t rely on it. Some browsers insert page breaks even in images.
• You don’t know the page width and height (could A5). Keep anything as flexible as possible.
• For performance, put your print style into the main stylesheet in a @media print {} rule.
• Use pt not px for borders and margins. A printer doesn’t know what a pixel is and may come to strange results.
• Develop your print layout in Opera, which has the best support for @media print currently, and insert compatibility hacks, when you’re done.
• Internet Explorer may crash on print, if you use its reserved IDs.
• Never rely on print preview. You get very different results on real printouts. Save the rain forest with a print-to-pdf-driver. :)

Why can't I print a web page accurately?

Different Browser may differ when applying styles for printing.

If you want to have a consistent result across browsers, define your own print-styles.

Like this:

<link rel="stylesheet" type="text/css" href="print.css" media="print" />

edit: Some links on how to achieve good printing results:

What are most useful media="print" specfic ,cross browser compatible css properties?
-> Link to A List Apart which normally has very good articles

How to get cross browser compatibility in Print on page from all browsers?

Predictable and consistent cross-browser printing from HTML

We use wkhtmltopdf and PrinceXML to get consistent styling. Both are command line tools that can take a URL plus a custom CSS file. They generate consistent output, and are browser independent, because they are the rendering engine.

We used to use wkhtmltopdf, but we're starting to move to PrinceXML because it supports margin-boxes and two-column layout. (The main caveat with PrinceXML is the price.)

Perfectly styling PDF doesn't seem any worse or harder than styling for web display. My experience is that it takes an hour or two to get a print page styled correctly. I've never tried to handle Google Charts.

How to use both rel=preload and rel=stylesheet for the same tag?

For loading CSS styles asynchronously, you should indicate it, as a preload stylesheet. Whenever you use rel="preload" alone, it won't transform to stylesheet on page load and it will remain as preload, so to indicate it as stylesheet you should use another attribute such as as which indicate the type of element and in your case, it should be style. Then you need to tell the browser whenever the loading process got finished you need to consider this as a stylesheet, so you have to define another attribute like onload and then define its real relation.

so you have to import it like this:

<link rel="preload" as="style" onload="this.rel='stylesheet'" href="http://www.example.com/style.css">

NOTE: You can read more about it here in google developers.

UPDATE

Since preload is not supported in firefox until now (according to this), the only way to do it, is to declare it twice in the one rel tag or two separate tags.

<link rel="preload" as="style" href="http://www.example.com/style.css">
<link rel="stylesheet" href="http://www.example.com/style.css">

Or

<link rel="stylesheet" rel="preload" as="style" href="http://www.example.com/style.css">

NOTE: As @JohnyFree tested the second one (one with a line through) in the Google page speed, it won't be recognized as valid preload style, whilst the format is valid according to W3.org.

Should we learn all CSS (till version3) even if all browser don't support and we don't use?

I would suggest downloading a "cheat sheet" (example) as a reference for those properties that you don't use very frequently rather than attempting to memorize things that you don't use. It's good to try and familiarize yourself with all the capabilities -- I'd suggest looking through tutorials (example, and another, and one more oriented toward design), though, and learning techniques that seem interesting rather than the standard. Eventually, you'll come to be familiar enough with the standards that you rarely need to use your cheat sheet.

CSS media queries: max-width OR max-height

Use a comma to specify two (or more) different rules:

@media screen and (max-width: 995px), 
       screen and (max-height: 700px) {
  ...
}

From https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

Commas are used to combine multiple media queries into a single rule. Each query in a comma-separated list is treated separately from the others. Thus, if any of the queries in a list is true, the entire media statement returns true. In other words, lists behave like a logical or operator.

---

Related Topics