CODEWITHSUNDEEP
cssprintingstylesheetprinting-web-page
cnst
cnst

Reputation: 27258

Can @page rule be used inside @media print?

I have something like the following in my CSS, in order to be friendly to the edit styles bookmarklet, which doesn't support the media attribute of the style tag, so, I explicitly use @media print for the whole style.

@media print {

  @page {
margin: 1cm;
margin-top: 12mm;
size: portrait;
  }
  body {
font: 9.3pt "Hoefler Text", "Franklin Gothic Book", sans-serif;
max-width: 80em;
border: 0;
margin: 0 auto;
padding: 0;
  }
  /* more stuff here */
}

However, it would seem like http://jigsaw.w3.org/css-validator/#validate_by_input doesn't like this, producing the following errors:

7       Parse Error @page { margin: 1cm; margin-top: 12mm; size: portrait; }
16      Parse Error /* more stuff here */ }

However, if I move the @page rule to outside of @media print, then no errors are reported.

Am I doing something wrong, or is this a bug in the validator?

According to MDN, browser support is pretty new, SO confirms, even though this has been part of the original CSS2 recommendation from 1998, pretty much unchanged.

Upvotes: 4

Views: 2970

Answers (1)

user3072532
user3072532

Reputation:

Quote from another SO answer:

Now, the actual issue here is that nested @media rules are not valid in CSS2.1 because you're not allowed to nest any at-rules within @media rules.

However, according to the CSS3 spec is possible, as the previous answer states. I think you can move safely this rule outside the @media print rule, since by itself is for printing the document. Quote from MDN:

The @page CSS at-rule is used to modify some CSS properties when printing a document.

Upvotes: 1

Related Questions