CSS中@page的margin属性使用变量时不生效问题求助

问题代码 #

:root {
  --main-font: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  --margin: 10cm;
}

@media print {
  *:not(span) {
    font-family: var(--main-font);
  }
  @page {
    size: A4;
    margin: var(--margin);
  }
}

问题描述 #

上述代码中，--main-font变量可正常生效，打印时字体按预期变化，但--margin变量无法生效，页边距为默认值。若将@page的margin改为静态值如margin:10cm则可正常工作，请问这是为何？

原因解释 #

• @page是控制打印页面布局的专属规则，它不属于网页文档的元素体系，和:root这类文档根元素的作用域完全分离，因此无法访问:root中定义的CSS变量。
• 而*:not(span)是针对文档内的元素设置样式，这些元素能正常继承:root的变量，所以--main-font可以正常生效。
• 目前CSS规范明确限制了@page规则不能使用自定义属性（CSS变量），它的属性值仅支持静态数值，无法引用文档树上下文里的变量。

内容的提问来源于stack exchange，提问作者clapmemereview