Adding CSS to default Google Chrome printing

Question

I'm printing a page of my PHP application with the ( ctrl + P ) (default printing). How can i make sure that the CSS (tables, padding, cellspacing, background picture with opacity) are printed along on the sheet. I'm calling the CSS from another file.

Thanks for your help and time.

Answer 1

You must add this

html{-webkit-print-color-adjust:exact;}

To any css file of the project, ideally the print one, as the others won't load when printing. It will force chrome to use every background color and image exactly as coded.

Answer 2

Add this to your HTML page. Now you need to adjust your page manually, for fitting it to the print page. (use the preview function in Chrome)

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

The interesting part for the browser is media=print

---

You can find some more style commands for printing web pages here:

• CSS How-to: Optimize Pages for Printing Using CSS
• Printing a Book with CSS: Boom!
• complete css guide - Printing
• CSS Paged Media - @page Rule