Signatur
Beschreibung
Die Eigenschaft style einer CSSPageRule gibt Zugriff auf die Deklarationen innerhalb einer @page-Regel. Das ist die At-Regel, mit der man Seitengröße, Ränder und Ausrichtung für den Druck bzw. für seitenbasierte Medien festlegt. Der Rückgabewert ist ein CSSPageDescriptors-Objekt. Diese Klasse erbt von CSSStyleDeclaration und hat zusätzlich eigene Eigenschaften für seitenspezifische Deskriptoren wie size, pageOrientation und die margin-Varianten.
Die Eigenschaft selbst kann man nicht neu zuweisen. Das zurückgegebene Objekt ist aber live und lässt sich ändern: Mit setProperty(), getPropertyValue(), removeProperty() oder direkten Zuweisungen wie style.margin = "2cm" ändert man die Druckeinstellungen zur Laufzeit. Das ist nützlich, wenn Nutzer vor dem Drucken zum Beispiel Format oder Ränder selbst wählen sollen.
An eine CSSPageRule kommt man über document.styleSheets und die Liste cssRules eines Stylesheets. Dort filtert man nach rule instanceof CSSPageRule. Ob das Stylesheet von einer anderen Herkunft (Cross-Origin) stammt, spielt dabei eine Rolle.
Rückgabewert
@page-Regel. Es erbt von CSSStyleDeclaration. Ältere Browser liefern stattdessen direkt eine CSSStyleDeclaration.Beispiele
Deskriptoren einer @page-Regel auslesen
// Im Dokument: <style>@page { size: A4; margin: 2cm; }</style>
const pageRules = [...document.styleSheets]
.flatMap((sheet) => [...sheet.cssRules])
.filter((rule) => rule instanceof CSSPageRule);
for (const rule of pageRules) {
console.log(rule.selectorText || '(ohne Selektor)');
console.log(rule.style.getPropertyValue('size'));
console.log(rule.style.margin);
}Druckränder zur Laufzeit ändern
const sheet = new CSSStyleSheet();
sheet.insertRule('@page { margin: 1cm; }');
document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];
const pageRule = sheet.cssRules[0];
document.querySelector('#rand').addEventListener('change', (e) => {
pageRule.style.setProperty('margin', `${e.target.value}mm`);
console.log(pageRule.cssText);
});Querformat vor dem Drucken setzen
const printLandscape = () => {
const sheet = new CSSStyleSheet();
sheet.replaceSync('@page { size: A4 landscape; }');
document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];
const { style } = sheet.cssRules[0];
console.log(style.size);
window.print();
// Nach dem Drucken wieder entfernen
document.adoptedStyleSheets = document.adoptedStyleSheets.filter((s) => s !== sheet);
};
printLandscape();// Wichtig · Fallstricke
- Schreibgeschützt: Eine Zuweisung wie
rule.style = ...hat keine Wirkung, im Strict Mode wirft sie eventuell einen Fehler. Stattdessen ändert man die Eigenschaften des zurückgegebenen Objekts. - Kompatibilität:
CSSPageRule.stylegibt es seit langem in allen modernen Browsern. Den spezialisierten TypCSSPageDescriptorsliefern Browser erst seit etwa 2023/2024. Ältere Versionen geben eine einfacheCSSStyleDeclarationzurück. Nutzt man deshalbgetPropertyValue()undsetProperty(), funktioniert der Code in allen Browsern. - Cross-Origin-Stylesheets: Wird
cssRulesbei einem Stylesheet von fremder Herkunft ohne passende CORS-Header gelesen, wirft das einenSecurityError. Den Zugriff deshalb intry/catcheinschließen. - Nicht jeder Browser wertet jeden Deskriptor aus. Wie gut zum Beispiel
sizeoder die Randbereiche (@top-centerusw.) unterstützt werden, ist unterschiedlich, vor allem in Firefox und Safari. Wirksam werden die Werte erst in der Druckvorschau bzw. beim Drucken.