Search code examples
google-chromegoogle-chrome-devtoolscss-print

Print a customised Css version of a webpage in Chrome


Using the Inspector of Google Chrome, I can easily check how a webpage (any public webpage, not the ones I control) will be rendered to be printed, doing this.

Also, I can change the appearance of some Css styles on the fly.

My question is: can I actually print that modified version of the webpage I am already browsing at this point? Not by default, I've already checked that, but maybe there is something I can do...

(Edit: I am specially interested in changing background colours)


Solution

  • I was just changing background colours, so I automatically thought that the print version was ignoring my 'on the fly' changes. The truth is that the print version in Chrome and Safari always ignores background colours, no matter if they are the original ones or a modified version.

    The final solution is to edit the HTML on the fly, and adding -webkit-print-color-adjust: exact !important; to the elements you want to be printed with a background colour.

    In my case, I add this to the <head> element:

    <style>
    .elements-i-want-to-change {
      background-color: [the colour];
      -webkit-print-color-adjust: exact;
    }
    </style>
    

    Now, the printed version will contain my modified colours in the background :-D