Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

like image 775
Yanick Rochon Avatar asked Aug 18 '15 16:08

Yanick Rochon


People also ask

How do I print a CSS page style?

You can use CSS to change the appearance of your web page when it's printed on a paper. You can specify one font for the screen version and another for the print version. You have seen @media rule in previous chapters. This rule allows you to specify different style for different media.

How do I change the print settings on Google Chrome?

Step 1: Click the three dots on the upper right corner of your Google Chrome browser to expand the More Options list. Step 2: Select Print. Step 3: Click on More Settings. Step 4: Select the correct paper size from the dropdown.

What is print stylesheet?

A print stylesheet formats a web page so that, when printed, it automatically prints in a user-friendly format. Here's what you need to know. Print stylesheets have been around for a number of years and have been written about extensively.


1 Answers

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

like image 135
dmanexe Avatar answered Oct 21 '22 07:10

dmanexe