4

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.

Community
  • 1
  • 1
cnst
  • 25,870
  • 6
  • 90
  • 122
  • Interesting, even code under [`8.1.2. Media Queries`](http://www.w3.org/TR/css3-page/#page-size-media-query) doesn't get validated – Mr. Alien Feb 24 '14 at 14:52

1 Answers1

1

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.

Community
  • 1
  • 1
  • Yes, it could be moved out, but then it kinda looks ugly and out-of-line, since then not all parts of a given ` – cnst Feb 25 '14 at 00:36