Объединение @page с другими селекторами

Question

У меня есть CSS, который содержит элементы, которые должны отображаться условно.

Для большинства элементов это легко: у меня есть атрибут, прикрепленный к элементу body, и я могу использовать его в CSS:

body[data-var-draft=Draft] .heading1 {}

Это не похоже на хотя работа с элементами @page:

body[data-var-draft=Draft] @page {}

приводит к сообщению об ошибке в Antennahouse Formatter (6.6).

Я видел больше ограничений для правил @page:

@page titlepagesection, @page tocsection, @page chaptersection {}

, похоже, тоже не работает.

Возможно ли / можно ли комбинировать @page с другими селекторами?

Answer 1

Правило @page выбирается значением свойства page. Чтобы выбрать определенную именованную страницу в определенном контексте, задайте значение свойства page в правиле для этого контекста:

@page draft {
  background-image: url('draft-watermark.svg');
}

body[data-var-draft=Draft] {
  page: draft;
}

В главе 3 «Макет страницы» в разделе «Введение в CSS для Paged Media 'доступно по номеру https://www.antennahouse.com/css/.