9

A lot of web pages use a Print stylesheet to format things better for printing. My question is, is it possible to force the browser to render a page using the print stylesheet without actually printing it?

Matt Overall
  • 199
  • 1
  • 3
  • 12

2 Answers2

14

In Chrome (version 78), you can force the browser to render the webpage's print stylesheet using Chrome DevTools by going to More Tools > Rendering

Open Chrome DevTools Rendering Settings

then selecting the Print option in the Emulate CSS Media dropdown

Emulate print media checkbox in Chrome DevTools

Sal Ferrarello
  • 260
  • 2
  • 10
  • Note this option is still available, but the UX has changed. See also https://stackoverflow.com/questions/9540990/using-chromes-element-inspector-in-print-preview-mode/21156904#21156904 – patricktokeeffe Nov 20 '19 at 20:20
  • Thanks @patricktokeeffe, I've updated this answer to match the updated UX as of Chrome 78. Thanks. – Sal Ferrarello Dec 02 '19 at 13:02
3

usually the print css has a media type of print. simply remove the media definition and use it in replace of the main style sheet

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

change to

<link rel="stylesheet" type="text/css" media="all" href="print.css" />
Eonasdan
  • 7,563
  • 8
  • 55
  • 82
  • 1
    Question was how to view any page with print css automatically, if it's present on the page. – skaurus Mar 21 '13 at 09:54
  • 1
    which is what this would do. using a `print.css` as the main style sheet would cause the page to appear (as close as it could be) to what it will look like when printed – Eonasdan Mar 21 '13 at 11:59
  • So I should on each page I visit during the day open my browser console, search for media="print" and edit it? :-) – skaurus Mar 21 '13 at 18:07
  • 2
    ummm the OP was asking if where was a way to `force the browser to render a page using the print stylesheet without actually printing it`. So to my answer, instead of using the main style sheet make sure that the `print` style sheet does not have `media="print"` – Eonasdan Mar 21 '13 at 18:11
  • Well, ok, I was too categorical. I googled yesterday for a way to force all pages to print mode and read this question with that in mind. Sorry I guess :-) – skaurus Mar 21 '13 at 18:21
  • what if the printing statements are contained in the `@media print { }` block of the only stylesheet? – interDist Mar 28 '17 at 15:16
  • @Eonasdan don't be mad, but this answer doesn't solve what @interDist has said. The majority of the new pages use `@media print {}` nowadays. – fiatjaf Sep 05 '17 at 01:34
  • 1
    @fiatjaf don't get mad? What I am 4? lol I wrote this 6 years ago – Eonasdan Sep 05 '17 at 13:18
  • @Eonasdan, thank you for this post. It turned a 4 hour problem into a 10 second answer. Thanks again! – Miguel Coder Jul 29 '18 at 00:08