css - 将自定义属性与@page 规则一起使用

Question

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

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

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

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

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

Answer 1

css variables cascade and the :root selector and the @page rule don't have a child/parent relationship.

@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 在 @page 样式声明，而 Microsoft Edge 未能这样做，这意味着以下将导致每个页面在 Firefox 和 Chrome 中具有 25 毫米的边距:

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

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