Ü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 AndroidEdge MobileFirefox für AndroidOpera für AndroidSafari auf iOSSamsung Internet
Grundlegende UnterstützungChrome Vollständige Unterstützung 2Edge Vollständige Unterstützung JaFirefox Vollständige Unterstützung 19IE Vollständige Unterstützung 8Opera Vollständige Unterstützung 6Safari Keine Unterstützung NeinWebView Android ? Chrome Android ? Edge Mobile Vollständige Unterstützung JaFirefox Android Vollständige Unterstützung 19Opera Android ? Safari iOS ? Samsung Internet Android ?
bleed descriptor
Experimentell
Chrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
marks descriptor
Experimentell
Chrome ? Edge ? Firefox Keine Unterstützung NeinIE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android Keine Unterstützung NeinOpera Android ? Safari iOS ? Samsung Internet Android ?
size descriptor
Experimentell
Chrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?

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.

Schlagwörter des Dokuments und Mitwirkende

Mitwirkende an dieser Seite: mdnwebdocs-bot, SJW, Prinz_Rana, fscholz, Sebastianz
Zuletzt aktualisiert von: mdnwebdocs-bot,