使用@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变量级联，: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中具有25mm的边距：

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

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