使用带有 @page 规则的自定义属性答案

【问题标题】：Using custom properties with @page rules使用带有 @page 规则的自定义属性
【发布时间】：2017-06-24 10:29:43
【问题描述】：

我正在尝试将 css 自定义属性与 @page 规则一起使用，但它似乎不起作用。这是有道理的，因为 css 变量级联和 :root 选择器和 @page 规则没有子/父关系。

下面是我想做的一个典型例子：

:root {
    --page-width: 148.5mm;
    --page-height: 210mm;
}

@page  {
    size: var(--page-width) var(--page-height);
}

有什么方法可以将变量与@page 规则一起使用？

【问题讨论】：

既然@page是它自己的命名空间，你有没有试过@page { :root { --page-width: 148.5mm; } }
谢谢，我会试试的。但是有没有办法在@page之间共享相同的变量，比如说一个div？
我认为你不能在命名空间之间共享。您知道打印时可以使用@media 查询来设置 css 规则吗？
@LGSon：无论媒体类型如何，您都无法使用样式规则更改页面的尺寸。这就是页面规则存在的原因。
@BoltClock 感谢您的注意

标签： css css-selectors css-variables css-paged-media

【解决方案1】：

css 变量级联和:root 选择器和@page 规则没有子/父关系。

@page 也有级联规则。还有the page context does actually inherit from the root element，这意味着不仅@page 规则级联，而且它们与样式规则参与相同的级联。但由于这不在规范 a decade ago 中，因此页面上下文不从根元素继承的实现仍然符合规范。

虽然这意味着您不应该依赖 @page 规则从 :root 继承自定义属性，但这也意味着 @page 本身接受自定义属性，基本上使继承成为非问题。因此，以下内容预计会起作用，但它不会——似乎每个浏览器都无法创建自定义属性：

@page {
    --page-width: 148.5mm;
    --page-height: 210mm;
    size: var(--page-width) var(--page-height);
}

有趣的是，Firefox 和 Chrome 在解析和计算 var() 表达式 在@page 样式声明中使用后备值 没有问题，而 Microsoft Edge 则无法这样做，这意味着以下将导致每个页面在 Firefox 和 Chrome 中具有 25 毫米的边距：

@page {
    --page-margin: 50mm;
    margin: var(--page-margin, 25mm);
}

因此，简而言之，@page 规则中的自定义属性不起作用——不是因为规范不允许，而是因为每个浏览器的自定义属性实现都不完整。

【讨论】：