CSS Variables
Hi,
CSS Variables are not supported in @page directive.
<html>
<head>
<script src="https://unpkg.com/pagedjs@0.1.30/dist/paged.polyfill.js"></script>
<style>
:root {
--prefix-page-size-width: 210mm;
--prefix-page-size-height: 148mm;
--prefix-page-margin-top: 28mm;
--prefix-page-margin-bottom: 24mm;
--prefix-page-margin-left: 10mm;
--prefix-page-margin-right: 10mm;
}
@page {
size: var(--prefix-page-size-width) var(--prefix-page-size-height);
/* size: 210mm 148mm; */
margin-top: var(--prefix-page-margin-top);
margin-bottom: var(--prefix-page-margin-bottom);
margin-left: var(--prefix-page-margin-left);
margin-right: var(--prefix-page-margin-right);
}
section {
break-before: page;
}
@media screen {
.pagedjs_area {
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
}
}
</style>
</head>
<body>
<section>
</section>
</body>
</html>
I don't know if it's something related to Paged.JS or Chrome.
Please let me know if I did something wrong.