TheCSSPageDescriptors interface represents a CSS declaration block for an@pageat-rule.

The interface exposes style information and various style-related methods and properties for the page.Each multi-word property has versions in camel- and snake-case.This means, for example, that you can access themargin-top CSS property using the syntaxstyle["margin-top"] orstyle.marginTop (wherestyle is aCSSPageDescriptor).

ACSSPageDescriptors object is accessed through thestyle property of theCSSPageRule interface, which can in turn be found using theCSSStyleSheet API.

Attributes

This interface also inherits properties of its parent,CSSStyleDeclaration.

margin

A string representing themargin property of the corresponding@page at-rule.

margin-top

A string representing themargin-top property of the corresponding@page at-rule.

marginTop

A string representing themargin-top property of the corresponding@page at-rule.

margin-right

A string representing themargin-right property of the corresponding@page at-rule.

marginRight

A string representing themargin-right property of the corresponding@page at-rule.

margin-bottom

A string representing themargin-bottom property of the corresponding@page at-rule.

marginBottom

A string representing themargin-bottom property of the corresponding@page at-rule.

margin-left

A string representing themargin-left property of the corresponding@page at-rule.

marginLeft

A string representing themargin-left property of the corresponding@page at-rule.

page-orientationExperimental

A string representing thepage-orientation property of the corresponding@page at-rule.

pageOrientationExperimental

A string representing thepage-orientation property of the corresponding@page at-rule.

size

A string representing thesize property of the corresponding@page at-rule.

Instance methods

This interface inherits the methods of its parent,CSSStyleDeclaration.

Examples

Inspecting a page at-rule

This example gets theCSSPageDescriptors for a@page at-rule, if the object is supported on the browser, and then logs its properties.

<pre></pre>

const logElement = document.querySelector("#log");function log(text) {  logElement.innerText = `${logElement.innerText}${text}\n`;  logElement.scrollTop = logElement.scrollHeight;}

#log {  height: 280px;  overflow: scroll;  padding: 0.5rem;  border: 1px solid black;}

CSS

Below we define styles for the page using a@page at-rule.We assign different values for each margin property using themargin shorthand, and also specify thesize.We don't set thepage-orientation.This allows us to see how the properties map in the Web API object.

@page {  margin: 1cm 2px 3px 4px;  /* page-orientation: upright; */  size: A4;}

JavaScript

First we check ifCSSPageDescriptors is defined on the global window object, and if not we log that the interface is not supported.

IfCSSPageDescriptors is supported, we get the target stylesheet, and then gets thecssRules defined in that stylesheet.We need to get this stylesheet because the example is embedded in a separate frame with its own sheet (index0 is the CSS for this page).

We then iterate through the rules defined for the live example and match any that are of typeCSSPageRule, as these correspond to@page rules.For the matching objects we then log thestyle and all its values.

if (typeof window.CSSPageDescriptors === "undefined") {  log("CSSPageDescriptors is not supported on this browser.");} else {  // Get stylesheets for example and then get its cssRules  const myRules = document.getElementById("css-output").sheet.cssRules;  for (const rule of myRules) {    if (rule instanceof CSSPageRule) {      log(`${rule.style}`);      log(`margin: ${rule.style.margin}`);      // Access properties using CamelCase syntax      log(`marginTop: ${rule.style.marginTop}`);      log(`marginRight: ${rule.style.marginRight}`);      log(`marginBottom: ${rule.style.marginBottom}`);      log(`marginLeft: ${rule.style.marginLeft}`);      log(`pageOrientation: ${rule.style.pageOrientation}`);      // Access properties using snake-case syntax      log(`margin-top: ${rule.style["margin-top"]}`);      log(`margin-right: ${rule.style["margin-right"]}`);      log(`margin-left: ${rule.style["margin-left"]}`);      log(`margin-bottom: ${rule.style["margin-bottom"]}`);      log(`page-orientation: ${rule.style["page-orientation"]}`);      log(`size: ${rule.style.size}`);      // Log the original CSS text using inherited property: cssText      log(`cssText: ${rule.style.cssText}`);      log("\n");    }  }}

Results

The results are shown below.Note that thestyle object displayed at the top of the log should be aCSSPageDescriptors to match the current specification, but may be aCSSStyleDeclaration in some browsers.Note also that the corresponding values for properties in camel- and snake-case match each other and the@page declaration, and thatpage-orientation is the empty string"" because it is not defined in@page.

Specifications

Browser compatibility