CSSPageDescriptors

Интерфейс CSSPageDescriptors представляет собой блок объявления CSS для @page правила.

Интерфейс предоставляет информацию о стиле и различные методы и свойства, связанные со стилем, для страницы. Каждое многословное свойство имеет версии в верблюжьем и змеином регистре. Это означает, например, что вы можете получить доступ к свойству CSS margin-top с помощью синтаксиса style["margin-top"] или style.marginTop (где style является CSSPageDescriptor).

К объекту CSSPageDescriptors можно получить доступ через свойство style интерфейса CSSPageRule, который, в свою очередь, можно найти с помощью API CSSStyleSheet.

Этот интерфейс также наследует свойства своего родителя, CSSStyleDeclaration.

margin Экспериментально

Строка, представляющая свойство margin соответствующего правила @page.

margin-top Экспериментально

Строка, представляющая свойство margin-top соответствующего правила @page.

marginTop Экспериментально

Строка, представляющая свойство margin-top соответствующего правила @page.

margin-right Экспериментально

Строка, представляющая свойство margin-right соответствующего правила @page.

marginRight Экспериментально

Строка, представляющая свойство margin-right соответствующего правила @page.

Этот интерфейс наследует методы своего родителя, CSSStyleDeclaration.

В этом примере мы получаем CSSPageDescriptors для правила @page, если объект поддерживается браузером, а затем выводим его свойства.

CSS

Ниже мы определяем стили для страницы с помощью правила @page. Мы назначаем разные значения для каждого свойства отступа с помощью сокращения margin и также задаем size. Мы не задаем page-orientation. Это позволяет нам увидеть, как свойства отображаются в объекте API веб-браузера.

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

JavaScript

Сначала мы проверяем, определен ли CSSPageDescriptors в глобальном объекте окна, и если нет, то выводим сообщение, что интерфейс не поддерживается.

Если CSSPageDescriptors поддерживается, мы получаем таблицу стилей документа с индексом 1, а затем получаем cssRules, определенное в этой таблице стилей. Нам нужно получить эту таблицу стилей, потому что пример вставлен в отдельный фрейм со своей таблицей (индекс 0 — это CSS для этой страницы).

Затем мы перебираем правила, определенные для живого примера, и находим все правила типа CSSPageRule, так как они соответствуют правилам @page. Для соответствующих объектов мы выводим style и все его значения.

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.styleSheets[1].cssRules;
  for (let i = 0; i < myRules.length; i++) {
    if (myRules[i] instanceof CSSPageRule) {
      log(`${myRules[i].style}`);
      log(`margin: ${myRules[i].style.margin}`);

      // Access properties using CamelCase syntax
      log(`marginTop: ${myRules[i].style.marginTop}`);
      log(`marginRight: ${myRules[i].style.marginRight}`);
      log(`marginBottom: ${myRules[i].style.marginBottom}`);
      log(`marginLeft: ${myRules[i].style.marginLeft}`);
      log(`pageOrientation: ${myRules[i].style.pageOrientation}`);

      // Access properties using snake-case syntax
      log(`margin-top: ${myRules[i].style["margin-top"]}`);
      log(`margin-right: ${myRules[i].style["margin-right"]}`);
      log(`margin-left: ${myRules[i].style["margin-left"]}`);
      log(`margin-bottom: ${myRules[i].style["margin-bottom"]}`);
      log(`page-orientation: ${myRules[i].style["page-orientation"]}`);

      log(`size: ${myRules[i].style.size}`);

      // Log the original CSS text using inherited property: cssText
      log(`cssText: ${myRules[i].style.cssText}`);
      log("\n");
    }
  }
}

Результаты

Результаты показаны ниже. Обратите внимание, что объект style вверху лога должен быть объектом CSSPageDescriptors в соответствии с текущим спецификацией, но может быть CSSStyleDeclaration в некоторых браузерах. Также обратите внимание, что соответствующие значения для свойств в верблюжьем и змеином регистре совпадают со значением @page объявления, и что page-orientation — это пустая строка "", потому что она не определена в @page.