The @page
CSS at-rule is used to modify some CSS properties when printing a document.You can't change all CSS properties with @page
. You can only change the margins, orphans, widows, and page breaks of the document. Attempts to change any other CSS properties will be ignored.
@page { margin: 1cm; } @page :first { margin: 2cm; }
The @page
at-rule can be accessed via the CSS object model interface CSSPageRule
.
<length>
units, vh
, vw
, vmin
, and vmax
. Meanwhile do not use them within a @page
at-rule.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
Please refer to the various pseudo-classes of @page
for examples.
Specification | Status | Comment |
---|---|---|
CSS Logical Properties and Values Level 1 The definition of ':recto and :verso' in that specification. | Editor's Draft | Adds the :recto and :verso page selectors |
CSS Paged Media Module Level 3 The definition of '@page' in that specification. | 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) The definition of '@page' in that specification. | Recommendation | Initial definition |
Desktop | ||||||
---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | |
Basic support | 2 | Yes | 19 | 8 | 6 | No |
bleed descriptor
|
? | ? | ? | ? | ? | ? |
marks descriptor
|
? | ? | No | ? | ? | ? |
size descriptor
|
? | ? | ? | ? | ? | ? |
Mobile | |||||||
---|---|---|---|---|---|---|---|
Android webview | Chrome for Android | Edge Mobile | Firefox for Android | Opera for Android | iOS Safari | Samsung Internet | |
Basic support | ? | ? | Yes | 19 | ? | ? | ? |
bleed descriptor
|
? | ? | ? | ? | ? | ? | ? |
marks descriptor
|
? | ? | ? | No | ? | ? | ? |
size descriptor
|
? | ? | ? | ? | ? | ? | ? |
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/@page