How to use @media print and @page?

  • MediaMouth
    Asked on December 1, 2020 at 10:42 AM

    I've yet to see @media print and @page do anything on Mac OS Safari, Chrome or Firefox. My impression is that these CSS features are no longer supported?

  • Bojan Support Team Lead
    Replied on December 1, 2020 at 12:02 PM

    Greetings.

    This functionality is still available. I have tested it in Chrome and Firefox, and I had no problems with it. Please note that these will be applied only when printing the page:

    screenshot 3000 Screenshot 10

    This page is using the following HTML:

    <html>
    <head>
    <title>Test</title>
    <style>
    @media print { 
    body {
    color: red;
    }
    }
    </style>
    </head>
    <body>
    <h1>Some Text</h1>
    </body>
    </html>

    Let us know if you have any additional questions.

  • MediaMouth
    Replied on December 1, 2020 at 1:19 PM

    @Bojan_J, thanks for the followup. Since the posting I had gotten a few @media print (along with <style media="print">) to work as you point out, in Chrome & Firefox. Apparently there's no support in Safari.

    Additional questions regarding @page

    • So far the only rules that seem to work are size & margin. Other standard rules, like font, color, padding do not. Are there other rules that work within @page? Is there an up-to-date reference on what rules work and don't work?
    • Is there a way to place headers and footers outside the margins of @page? Some of the standard documented ways to do that do not seem to work. Examples:
    • w3.org suggests @top-left {content: counter(page)}. I've had no luck. Neither @top-left nor counter(page) seem to function at all with @page.
    • There's an intriguing alternative on this page that suggests using rules position: fixed; in conjunction with top:0; or bottom:0; This succeeds to the extent that it successfully positions elements at the top or bottom of every page, but they come into conflict with @page margins: top:0 and bottom:0 are confined within those margins, and any attempt to push them outside (using, say -.5in) crops them off the page.