Search code examples
htmlcssmedia-queries

About Firefox vs. Chrome print to pdf tool when using @media print


The @media at-rule can specify a media query, such as print, to apply css rules to the document.

Let's say I have the following code:

@media print {
  @page {
    size: 3in;
    margin: 0.2in;
  }
}

body {
  border: 1px solid;
}
<body>
  <h1>Title for the page</h1>
  <p>Some text goes into here.</p>
</body>

When I open this html webpage in Chrome, with its "Print to pdf" tool, I get a satisfactory result - the user can't change the exported pdf size, it is determined by the css rule, 3inch×3inch in this case. However, you can change the margins in this GUI, although I explicitly set it in the second rule.

EDIT: When choosing "Default" margins in the printing tool, the margins indeed follow the rule set up in the css file.

On the other hand, on Firefox, the user can simply change the pdf page size, change the orientation and how to scale the content into the page. If so, then what effect does the css rule have?

So my question is mainly towards Firefox behavior: Is that a bug or rather is it ok?

Any thoughts would be very helpful.


Solution

  • According to MDN, @page/size CSS rule is simply not supported in Gecko and WebKit based browsers (Firefox and Safari) as of 2021-10.

    https://developer.mozilla.org/en-US/docs/Web/CSS/@page/size#browser_compatibility

    Compatibility table from linked page showing no support in Firefox, Internet Explorer and Safari

    Bugzilla entry: [css3-page] implement @page rule size attribute