为什么CSS @page属性不起作用?

9cbw7uwe  于 2023-06-25  发布在  其他
关注(0)|答案(1)|浏览(650)

根据CSS分页媒体的specifications,应该可以执行以下操作

@media print {
  @page {
    size: a4;
    background: green;
  }
}

这种陈述的证据是说明书中存在的实施例9,并且其似乎也在附录A中相当清楚地陈述。
但不幸的是,似乎不可能实现这样的目标:显然所有的属性都被忽略了,我不能得到想要的结果(设置页面的背景没有变通方法)。
根据CanIUse@page规范至少应该得到Firefox(撇开一些次要功能)和Chromium/Chrome的支持,我目前正在测试这种行为。
你对这种奇怪的行为有线索或想法吗?有没有可能浏览器目前没有遵守规范?

**EDIT:**MDN中明确规定不支持sizemargin以外的属性。我仍然想知道为什么没有人关心规格。

8ftvxx2r

8ftvxx2r1#

根据CSS分页媒体的the specifications,应该可以执行以下操作:
你链接到的规范并不表明你发布的CSS是有效的,相反,它声明(强调我的):
如果size属性声明由 *width,height,device-width,device-height,aspect-ratio,device-aspect-ratio或方位媒体查询 *(或其他与纸张大小有关的条件)限定,则必须忽略该声明
。。。这是因为。。
[...]媒体查询不荣誉大小:它们假定如果没有指定@page规则则将选择的纸张尺寸。
你可以达到你想要的效果,但不是那样的。
就像这样:

@media print {
    :root {
        background-color: green;
        /* Note that most browsers don't print page background colors at all as it looks awful, regardless of if it's inkjet, color-laser, etc */
    }
}

@page {
    size: a4;
}

相关问题