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.

1

1 Answer 1

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.

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 <style media="print" tag are within @media print. But thanks for finding it out that it's explicitly invalid in CSS21!
    – cnst
    Feb 25, 2014 at 0:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.