Forum Bugs

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

dauwhe
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

mikeday
Thanks Dave we will take a look at this.
mikeday
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!)