page
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since Februar 2023.
Die page CSS-Eigenschaft wird verwendet, um die benannte Seite anzugeben, eine spezifische Art von Seite, die durch die @page-@rule definiert ist.
Wenn mehrere Selektoren hintereinander eine benannte Seite verwenden, könnte ein erzwungener Seitenumbruch mit 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ß-/Kleinschreibungssensitiver Name, definiert in einer
@page-Regel.
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 für eine benannte Seite
In diesem Beispiel gibt es zwei Teile zu diesem HTML; Drucksteuerungen und den zu druckenden Inhalt. Die Drucksteuerungen ermöglichen es dem Benutzer auszuwählen, wie die sections im article gedruckt werden.
<!-- 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, einschließlich der Größe und Orientierung sowie einigen Inhalten, die in den @top-center margin der gedruckten Seiten eingefügt werden.
@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 Druckdimensionen, die Orientierung und die Ränder, die in den benannten @page-Regeln im vorherigen CSS-Abschnitt definiert sind, auf Elemente mit der page-Eigenschaft anzuwenden. Die Abschnitte mit class="chapter" sind aufeinanderfolgend und erscheinen als eine Seite. Das break-after: page; wird verwendet, um sie aufzuteilen, wodurch jedes Kapitel auf einer separaten Seite gedruckt wird.
@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; } [data-print="grouped"] > #foreword, [data-print="paged"] > #foreword { page: foreword; font-family: Courier; } [data-print="grouped"] > #introduction, [data-print="paged"] > #introduction { page: introduction; font-family: Courier; } [data-print="grouped"] > #conclusion, [data-print="paged"] > #conclusion { page: conclusion; font-family: Courier; } [data-print="grouped"] > .chapter, [data-print="paged"] > .chapter { page: chapter; } [data-print="paged"] > .chapter { border: none; break-after: page; } .chapter > ul { columns: 2; } } Das 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 Stil-Schaltfläche für den Druck ausgewählt wurde:
Spezifikationen
| Specification |
|---|
| CSS Paged Media Module Level 3 # using-named-pages |
Browser-Kompatibilität
Loading…