@page

翻译不完整。 请帮助我们翻译这篇文章!

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

@page {
  margin: 1cm;
}

@page :first {
  margin: 2cm;
}

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

注意:W3C 正在讨论如何处理和视图窗口有关的 <length> 的单位:vhvmvminvmax。目前,请不要在 @page 规则中使用他们。

语法

描述符

size
指定页面盒模型所在的容器的大小和方向。一般情况下,因为一个页面盒模型被渲染到一面纸张上,所以这个属性也指示了目标纸张的大小。
marks
向文档添加剪切标记和/或注册标记。
bleed
为页面框盒指定一个限制区域,超过这个区域的页面内容将被裁剪。

形式化语法

@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 的各种伪类的例子。

规范

规范 状态 备注
CSS Logical Properties and Values 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

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
@pageChrome Full support 2Edge Full support 12Firefox Full support 19IE Full support 8Opera Full support 6Safari No support NoWebView Android Full support 37Chrome Android Full support 18Firefox Android Full support 19Opera Android Full support 14Safari iOS No support NoSamsung Internet Android Full support 1.0
bleed descriptorChrome No support NoEdge No support NoFirefox No support NoIE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android No support NoOpera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
marks descriptorChrome No support NoEdge No support NoFirefox No support NoIE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android No support NoOpera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
Page-margin boxesChrome No support NoEdge No support NoFirefox No support NoIE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android No support NoOpera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
size descriptorChrome No support NoEdge No support NoFirefox No support NoIE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android No support NoOpera Android No support NoSafari iOS No support NoSamsung Internet Android No support No

Legend

Full support  
Full support
No support  
No support

参见