Forum Bugs

CSS Variables not working in @page because page context not inheriting from root

There have been a few discussions about this, and the spec is less definitive than one would hope, but the very first thing I tried with CSS variables didn't work:

:root {
	--page-size: 6in 9in;
	--theme-color: red;
	@page {
	size: var(--page-size);
	background-color: var(--theme-color)
	p {
	color: var(--theme-color)

In this case, paragraphs are indeed red, but none of the variables apply to @page.

The messiest part of our CSS is setting styles in page margin boxes. Being able to use some variables here would be great.



Thanks Dave we will take a look at this.
We have added support for CSS variables in @page rules in Prince 13.1, available now! The @page rule also inherits from :root now, like it should. :D

(We'll merge this in Prince for Books in the new year!)