@page

Übersicht

Die @page CSS At-Regel wird verwendet, um einige CSS Eigenschaften zu ändern, wenn ein Dokument gedruckt wird. Es können nicht alle CSS Eigenschaften mit @page geändert werden. Es können nur Seitenränder, Schusterjungen, Hurenkinder und Seitenumbrüche des Dokuments verändert werden. Versuche, andere CSS Eigenschaften zu ändern, werden ignoriert.

Die @page At-Regel kann über die CSS Objektmodellschnittstelle CSSPageRule angesprochen werden.

Hinweis: Das W3C diskutiert, wie die viewportbezogenen <length> Einheiten, vh, vw, vmin, und vmax gehandhabt werden sollen. Bis dahin sollten diese nicht in einer @page At-Regel verwendet werden.

Syntax

Deskriptoren

size
Bestimmt die Zielgröße und -ausrichtung des den Seitenbereich beinhaltenden Blocks. Im allgemeinen Fall, in dem ein Seitenbereich auf einer Seitenpostille dargestellt wird, gibt sie auch die Größe der Zielseitenpostille an.
marks
Fügt dem Dokument Schneide- und/oder Registrierungsmarker hinzu.
bleed
Gibt den Überhang über den Seitenbereich an, bei dem die Darstellung der Seite abgeschnitten wird.

Formale Syntax

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

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

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

wobei
<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

Beispiele

Bitte lies die verschiedenen Pseudoklassen von @page für Beispiele.

Spezifikationen

Spezifikation Status Kommentar
CSS Logical Properties and Values Level 1
Die Definition von ':recto und :verso' in dieser Spezifikation.
Bearbeiterentwurf Fügt die :recto und :verso Seitenselektoren hinzu.
CSS Paged Media Module Level 3
Die Definition von '@page' in dieser Spezifikation.
Arbeitsentwurf Keine Änderung bzgl. CSS Level 2 (Revision 1), es können jedoch mehr CSS At-Regeln innerhalb @page verwendet werden.
CSS Level 2 (Revision 1)
Die Definition von '@page' in dieser Spezifikation.
Empfehlung Ursprüngliche Definition

Browser Kompatibilität

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid WebviewChrome für AndroidFirefox für AndroidOpera für AndroidSafari auf iOSSamsung Internet
@pageChrome Vollständige Unterstützung 2Edge Vollständige Unterstützung 12Firefox Vollständige Unterstützung 19IE Vollständige Unterstützung 8Opera Vollständige Unterstützung 6Safari Keine Unterstützung NeinWebView Android Vollständige Unterstützung 37Chrome Android Vollständige Unterstützung 18Firefox Android Vollständige Unterstützung 19Opera Android ? Safari iOS Keine Unterstützung NeinSamsung Internet Android ?
bleed descriptor
Experimentell
Chrome Keine Unterstützung NeinEdge Keine Unterstützung NeinFirefox Keine Unterstützung NeinIE Keine Unterstützung NeinOpera Keine Unterstützung NeinSafari Keine Unterstützung NeinWebView Android Keine Unterstützung NeinChrome Android Keine Unterstützung NeinFirefox Android Keine Unterstützung NeinOpera Android Keine Unterstützung NeinSafari iOS Keine Unterstützung NeinSamsung Internet Android Keine Unterstützung Nein
marks descriptor
Experimentell
Chrome Keine Unterstützung NeinEdge Keine Unterstützung NeinFirefox Keine Unterstützung NeinIE Keine Unterstützung NeinOpera Keine Unterstützung NeinSafari Keine Unterstützung NeinWebView Android Keine Unterstützung NeinChrome Android Keine Unterstützung NeinFirefox Android Keine Unterstützung NeinOpera Android Keine Unterstützung NeinSafari iOS Keine Unterstützung NeinSamsung Internet Android Keine Unterstützung Nein
size descriptor
Experimentell
Chrome Keine Unterstützung NeinEdge Keine Unterstützung NeinFirefox Keine Unterstützung NeinIE Keine Unterstützung NeinOpera Keine Unterstützung NeinSafari Keine Unterstützung NeinWebView Android Keine Unterstützung NeinChrome Android Keine Unterstützung NeinFirefox Android Keine Unterstützung NeinOpera Android Keine Unterstützung NeinSafari iOS Keine Unterstützung NeinSamsung Internet Android Keine Unterstützung Nein

Legende

Vollständige Unterstützung  
Vollständige Unterstützung
Keine Unterstützung  
Keine Unterstützung
Kompatibilität unbekannt  
Kompatibilität unbekannt
Experimentell. Das Verhalten kann sich zukünftig ändern.
Experimentell. Das Verhalten kann sich zukünftig ändern.