I have the below simple html code. I'm studying https://www.smashingmagazine.com/2015/01/designing-for-print-with-css/.
Why the @top-center and @bottom-right doesn't show in my print preview on Chrome browser?
<html>
<head>
<style>
@page {
size: A4
}
@page {
@top-center {
margin: 10pt 0 30pt 0;
border-top: .25pt solid #666;
content: "My book";
font-size: 9pt;
color: #333;
}
}
@page {
@bottom-right {
content: "Page "counter(page) " of "counter(pages);
}
}
</style>
</head>
<body style="padding: 1.5cm">
Hello world!
</body>
</html>
This is the print preview:
According to MDN: "Warning: The margin at-rules have not been implemented by any user agent (updated: August 2023)."
https://developer.mozilla.org/en-US/docs/Web/CSS/@page#margin_at-rules