-
MediaMouthAsked 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 LeadReplied 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:
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.
-
MediaMouthReplied 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.