【问题标题】:Can @page rule be used inside @media print?@page 规则可以在@media print 中使用吗?
【发布时间】:2014-03-26 07:06:45
【问题描述】:

我的 CSS 中有类似以下内容,为了对 edit styles 小书签友好,它不支持 style 标签的 media 属性,所以,我明确使用 @media print整个风格。

@media print {

  @page {
margin: 1cm;
margin-top: 12mm;
size: portrait;
  }
  body {
font: 9.3pt "Hoefler Text", "Franklin Gothic Book", sans-serif;
max-width: 80em;
border: 0;
margin: 0 auto;
padding: 0;
  }
  /* more stuff here */
}

但是,http://jigsaw.w3.org/css-validator/#validate_by_input 似乎不喜欢这样,会产生以下错误:

7       Parse Error @page { margin: 1cm; margin-top: 12mm; size: portrait; }
16      Parse Error /* more stuff here */ } 

但是,如果我将the @page rule 移动到@media print 之外,则不会报告任何错误。

是我做错了什么,还是验证器中的错误?

According to MDN, browser support is pretty newSOconfirms,尽管这一直是part of the original CSS2 recommendation from 1998,但几乎没有变化。

【问题讨论】:

标签: css printing stylesheet printing-web-page


【解决方案1】:

引用另一个SO answer

现在,这里的实际问题是嵌套的 @media 规则是 not valid in CSS2.1,因为您不能在 @media 规则中嵌套 任何 at-rules。

但是,根据CSS3 spec 是可能的,正如前面的答案所述。我认为您可以安全地将这条规则移到@media print 规则之外,因为它本身就是用于打印 文档。引用MDN:

@page CSS at-rule 用于在打印文档时修改某些 CSS 属性。

【讨论】:

  • 是的,它可以被移出,但它看起来有点丑陋和不合时宜,因为那时并不是给定<style media="print" 标签的所有部分都在@media print 内。但是感谢您发现它在 CSS21 中明确无效!
猜你喜欢
  • 1970-01-01
  • 2021-04-06
  • 2020-07-05
  • 2014-05-05
  • 2015-03-22
  • 2020-01-15
  • 2021-01-17
  • 2019-05-30
  • 1970-01-01
相关资源
最近更新 更多