2

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

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

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

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

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

4

1 回答 1

2

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

@page规则级联，也是。并且页面上下文确实继承自根元素，这意味着不仅@page规则级联，而且它们与样式规则参与相同的级联。但是由于十年前这不在规范中，因此页面上下文不从根元素继承的实现仍然符合规范。

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

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

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

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

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

于 2017-06-24T16:33:28.793 回答