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

Question

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

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

: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, which means not only do @page rules cascade, but they participate in the same cascade as style rules. But since this wasn't in the spec 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:

中有 25mm 的边距

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

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

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

Using custom properties with @page rules

css

css-selectors

css-paged-media

css-variables