CODEWITHSUNDEEP
htmlcssgoogle-chrome
Yanick Rochon
Yanick Rochon

Reputation: 53616

Google Chrome CSS styles when printing

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?

Upvotes: 8

Views: 6104

Answers (1)

dmanexe
dmanexe

Reputation: 1029

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

Upvotes: 3

Related Questions