page CSS property
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Februar 2023 browserübergreifend verfügbar.
Die page CSS Eigenschaft wird verwendet, um die benannte Seite zu spezifizieren, eine spezifische Art von Seite, die durch die @page at-rule definiert ist.
Wenn es mehrere Selektoren gibt, die aufeinanderfolgend eine benannte Seite verwenden, kann ein erzwungener Seitenumbruch unter Verwendung von break-after erforderlich sein.
Syntax
/* set a named page */
page: exampleName;
page: chapterIntro;
/* Use ancestors named page */
page: auto; /* default value */
/* Global values */
page: inherit;
page: initial;
page: revert;
page: revert-layer;
page: unset;
Werte
auto-
Standardwert. Verwenden Sie den Wert des nächsten Vorfahren mit einem nicht-
autoWert. Wenn kein Vorfahre einen benannten Seitenwert gesetzt hat, ist der verwendete Wert für auto der leere String. <custom-ident>-
Groß- und Kleinschreibungssensitiver Name, der in einer
@pageat-rule definiert ist.
Formale Definition
| Anfangswert | auto |
|---|---|
| Anwendbar auf | Blocklevelelemente in normalem Fluss des Wurzelelements. User Agents können es auch auf andere Elemente wie table-row-Elemente anwenden. |
| Vererbt | Nein |
| Berechneter Wert | wie angegeben |
| Animationstyp | diskret |
Formale Syntax
page =
auto |
<custom-ident>
Beispiele
Beispiel einer benannten Seite
In diesem Beispiel gibt es zwei Teile in diesem HTML; Drucksteuerungen und den zu druckenden Inhalt.
Die Drucksteuerungen ermöglichen es dem Benutzer auszuwählen, wie die sections im article gedruckt werden sollen.
<!-- print options in a fieldset -->
<fieldset id="printStyle">
<legend>How would you like to print</legend>
<label for="single">
<input type="radio" id="single" name="type" value="single" checked />
No Pages
</label>
<label for="grouped">
<input type="radio" id="grouped" name="type" value="grouped" />Pages with
Grouped Chapters
</label>
<label for="paged">
<input type="radio" id="paged" name="type" value="paged" />
Chapters Paged
</label>
<button id="print">Print</button>
</fieldset>
<!-- Content to be printed -->
<article id="print-area" data-print="single">
<section id="toc">
<h2>Table of contents</h2>
<ul>
<li>Foreword</li>
<li>Introduction</li>
<li>Chapter One - named pages</li>
<li>Chapter Two - page orientation</li>
<li>Chapter Three - page margins</li>
<li>Conclusion</li>
</ul>
</section>
<section id="foreword">
<h2>Foreword</h2>
<p>
This book is all about how the CSS <code>@page</code> at-rule can help
with printing HTML books.
</p>
</section>
<section id="introduction">
<h2>Introduction</h2>
<p>
This book is a concept to show how an <em>HTML</em> document can easily be
printed out in pages.
</p>
</section>
<section id="chapter1" class="chapter">
<h2>Named pages</h2>
<p>Lorem ipsum</p>
</section>
<section id="chapter2" class="chapter">
<h2>Page Orientation</h2>
<p>Lorem ipsum</p>
</section>
<section id="chapter3" class="chapter">
<h2>Page Margins</h2>
<p>There are 16 page margins that can be set:</p>
<ul>
<li>@top-left-corner</li>
<li>@top-left</li>
<li>@top-center</li>
<li>@top-right</li>
<li>@top-right-corner</li>
<li>@left-top</li>
<li>@left-middle</li>
<li>@left-bottom</li>
<li>@right-top</li>
<li>@right-middle</li>
<li>@right-bottom</li>
<li>@bottom-left-corner</li>
<li>@bottom-left</li>
<li>@bottom-center</li>
<li>@bottom-right</li>
<li>@bottom-right-corner</li>
</ul>
<p>They can be used to show what appears in these parts of the margin</p>
</section>
<section id="conclusion">
<h2>Conclusion</h2>
<p>Now go ahead and write books.</p>
</section>
</article>
Der erste Teil des CSS richtet die benannten Seiten ein, diese schließen die Größe und Ausrichtung ein und auch etwas Inhalt, der in den @top-center Margin der gedruckten Seiten eingefügt werden soll.
@page toc {
size: a4 portrait;
@top-center {
content: "Table of contents";
}
}
@page foreword {
size: a4 portrait;
@top-center {
content: "Foreword";
}
}
@page introduction {
size: a4 portrait;
@top-center {
content: "Introduction";
}
}
@page conclusion {
size: a4 portrait;
@top-center {
content: "Conclusion";
}
}
@page chapter {
size: a4 landscape;
@top-center {
content: "Chapter";
}
}
Der nächste Teil des CSS verwendet Attributselektoren, um die Druckabmessungen, Ausrichtung und Ränder, die in den benannten @page Regeln im vorherigen CSS-Abschnitt definiert sind, auf Elemente anzuwenden, die die page Eigenschaft verwenden.
Die Abschnitte mit class="chapter" sind fortlaufend und erscheinen als eine Seite.
Das break-after: page; wird verwendet, um sie zu trennen, was jedes Kapitel in eine separat gedruckte Seite aufteilt.
@media print {
fieldset {
display: none;
}
section {
font-size: 2rem;
font-family: "Roboto", sans-serif;
}
.chapter {
border: tomato 2px solid;
}
[data-print="grouped"] > #toc,
[data-print="paged"] > #toc {
page: toc;
font-family: "Courier New";
}
[data-print="grouped"] > #foreword,
[data-print="paged"] > #foreword {
page: foreword;
font-family: "Courier New";
}
[data-print="grouped"] > #introduction,
[data-print="paged"] > #introduction {
page: introduction;
font-family: "Courier New";
}
[data-print="grouped"] > #conclusion,
[data-print="paged"] > #conclusion {
page: conclusion;
font-family: "Courier New";
}
[data-print="grouped"] > .chapter,
[data-print="paged"] > .chapter {
page: chapter;
}
[data-print="paged"] > .chapter {
border: none;
break-after: page;
}
.chapter > ul {
columns: 2;
}
}
JavaScript aktualisiert den Wert des data-print Attributs, welches das Attribut ist, auf das die benannte Seite angewendet wird, wenn Sie eine andere Druckoption auswählen:
const printArea = document.querySelector("#print-area");
const printButton = document.querySelector("#print");
const printOption = document.querySelector("#printStyle");
printOption.addEventListener("change", (event) => {
if (event.target.value === "single") {
printArea.dataset.print = "single";
} else if (event.target.value === "grouped") {
printArea.dataset.print = "grouped";
} else {
printArea.dataset.print = "paged";
}
});
printButton.addEventListener("click", () => {
window.print();
});
Was gedruckt wird und was im Druckvorschau-Dialog angezeigt wird, ändert sich abhängig davon, welcher Druckstil-Radiobutton ausgewählt ist:
Spezifikationen
| Spezifikation |
|---|
| CSS Paged Media Module Level 3 # propdef-page |