MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

@page

这篇翻译不完整。请帮忙从英语翻译这篇文章

概述

@page 规则用于在打印文档时修改某些CSS属性。你不能用@page规则来修改所有的CSS属性,而是只能修改margin,orphans,widow 和 page breaks of the document。对其他属性的修改是无效的。

@page 规则可以通过CSS对象模型接口 CSSPageRule 访问.

注意: W3C组织正在讨论如何处理和视图窗口有关的 <长度> 单位:vh,vm,vmin和vmax.同时,请不要在@page 规则中使用他们。

语法

描述

size
指定页面盒模型所在的容器的大小和方向。一般情况下,因为一个页面盒模型被渲染到一面纸张上,所以这个属性也指示了目标纸张的大小。
marks
向文档添加剪切标记和/或注册标记。
bleed
指定一个超出页面盒模型的区域,在这个区域的页面内容将被裁剪。
Specifies the extent beyond the page box at which the page rendering is clipped.

正式语法

@page <page-selector-list> {
  <page-body>
}

where
<page-selector-list> = [ <page-selector># ]?
<page-body> = <declaration>? [ ; <page-body> ]? | <page-margin-box> <page-body>

where
<page-selector> = <pseudo-page>+ | <ident> <pseudo-page>*
<page-margin-box> = <page-margin-box-type> { <declaration-list> }

where
<pseudo-page> = : [ left | right | first | blank ]
<page-margin-box-type> = @top-left-corner | @top-left | @top-center | @top-right | @top-right-corner | @bottom-left-corner | @bottom-left | @bottom-center | @bottom-right | @bottom-right-corner | @left-top | @left-middle | @left-bottom | @right-top | @right-middle | @right-bottom

示例

请参考@page中各种伪类的例子。

规范

Specification Status Comment
CSS Logical Properties Level 1
:recto and :verso
Editor's Draft Adds the :recto and :verso page selectors
CSS Paged Media Module Level 3
@page
Working Draft No change from CSS Level 2 (Revision 1), though more CSS at-rules can be used inside a @page.
CSS Level 2 (Revision 1)
@page
Recommendation Initial definition

浏览器支持

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support 2.0 (Yes) 19.0 (19.0) 8.0 6.0 未实现
Feature Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support ? (Yes) 19.0 (19.0) ? ? ?

文档标签和贡献者

 此页面的贡献者: Boringboy
 最后编辑者: Boringboy,