@media print的CSS页面x

Question

我会先说这个问题,我之前已经问过这个问题,但我能找到的所有答案似乎都引用了一个不再有效的过时解决方案(至少在Firefox 56 [64位]中)

过时的方法是曾经有一个自动实例化的CSS计数器命名pages,所以从这个SASS生成一小段CSS:

footer {
    position: fixed;
    bottom: 0;
    left: 20px;

    &:after {
        counter-increment: page;
        content: "Page " counter(page) " of " counter(pages);
    }
}

习惯做我想做的事.现在它显示"Page [x]为0".

我已经尝试使用这个CSS来重新创建我自己的max-page计数器:

@page {
    counter-increment: maxpage;
}

但是,当在我的页脚中使用时,这也会返回0.

是否有任何合理的跨浏览器友好方式来获得此功能？

Answer 1

从 CSS3 开始，您可以在 @page 规则中指定计数器。这是一个例子：

@page { counter-increment: page }

上面的规则指示布局引擎创建一个名为“page”的计数器（按照惯例称为page，它可以是任何东西）。该计数器对于每个页面都会递增。与任何计数器一样，您可以在文档中的任何位置使用计数器的当前值

例如，使用以下 CSS 规则：

#pageNumber { content: counter(page) }

和这段 HTML：

<span id="pageNumber"></span>

您可以使用当前页码计数器作为 HTML 文档中的内容。你甚至可以走得更远。假设您希望从 10 开始页码。然后您可以使用 @page:first 规则将第一页的计数器重置为值 9。

@page { counter-increment: page }
@page:first { counter-reset: page 9 }

两个规则的组合会将第一页的计数器重置为 9。然后对于每个页面（包括第一页），它将递增计数器。这会导致第一页的计数器值为 10，第二页的计数器值为 11，依此类推。

你也可以使用纯css

例子：

@page {
    counter-increment: page;
    counter-reset: page 1;
    @top-right {
        content: "Page " counter(page) " of " counter(pages);
    }
}

... 理论上。在现实世界中，只有 PrinceXML 支持这一点。