Google Chrome CSS styles when printing

Question

Is there any way to retrieve the CSS styles used by Google Chrome when generating print preview, and printing pages?

The goal of this question is to remove the page URL at the bottom-left of the page, but I'd also remove the entire header also.

Somewhere, on a forum, I have found this snippet

@media print {

  @page { 
    @top-left-corner {content:"";} 
    @top-left {content:"";} 
    @top-center {content:"";} 
    @top-right {content:"";} 
    @top-right-corner {content:"";} 
    @bottom-left-corner {content:"";} 
    @bottom-left {content:"";} 
    @bottom-center {content:"";} 
    @bottom-right {content:"";} 
    @bottom-right-corner {content:"";} 
  } 

}

However it does not seem to work.

Is it possible to modify Google Chrome's generated print document through CSS?

Looks to be a duplicate of http://stackoverflow.com/questions/2192806/can-i-remove-the-url-from-my-print-css-so-the-web-address-doesnt-print — Garbee, Aug 18 '15 at 16:19
There are valuable information in the referenced question, however I can't say that it does answer my question; I am yet unsure if headers and footers can or not be styled directly through browser-specific CSS rules. — Yanick Rochon, Aug 18 '15 at 17:52
@Garbee The only relevant part I can see is : "The header and footer are generated by the browser." However, this does not tell how **Google Chrome** generates these; are they directly inserted as elements in the generated PDF, or are they inserted as HTML elements with CSS styling before generating the PDF? BTW: I know the PDF format, anything regarding "how a PDF is generated" is beside the point. — Yanick Rochon, Aug 18 '15 at 19:59
First off [users can turn the option to display browser generated header/footer on or off.](http://www.worldstart.com/to-print-or-not-to-print-headersfooters-in-google-chrome/) So there is no real good reason to disable people from printing them. But apparently [you can force it by using "@page { margin: 0 auto; }".](http://stackoverflow.com/questions/8454730/change-chrome-print-preview-default-options) So the automatic header/footer is html/css generated before the pdf is generated. — Rob Monhemius, Aug 19 '15 at 00:11

score 3 · Answer 1 · answered Jul 24 '18 at 17:43

Since I see two questions...

Is there any way to retrieve the CSS styles used by Google Chrome when generating print preview, and printing pages?

According to this answer on StackOverflow, here is a list of places that keep an up to date copy of all contemporary browser default CSS style sheets, including Google Chrome.

Is it possible to modify Google Chrome's generated print document through CSS?

Technically, print CSS qualifies as a media query. If you are familiar with CSS, it is the same style and syntax as specific rules for screen sizes, such as mobile devices. You can predicate your print-specific CSS within a .css file. To call print specific CSS from your own stylesheet, you can use the following snippet:

@media print { /* Print CSS here */ #example { border: none; } }

Google Chrome CSS styles when printing

1 Answers1