Правило CSS @page используется для модификации некоторых свойств CSS при печати документа. Вы не можете изменить все CSS свойства с @page. Вы можете изменить только margin, orphans, widows, и разрывы страницы документа. Попытки изменить любые другие свойства CSS будут игнорироваться.

@page {
  margin: 1cm;
}

@page :first {
  margin: 2cm;
}

Правило @page доступно через интерфейс объектной модели CSS CSSPageRule.

Примечание: В W3C iобсуждают, как обрабатывать связанные с областью просмотра единицы <length> такие как, vh, vw, vmin, и vmax. Тем временем не используя их с правилом @page.

Синтаксис

Дескрипторы

size
Указывает целевой размер и ориентацию полей страницы, содержащихся в блоке. В общем случае, когда одно поле страницы отображается на одном листе страницы, он также определяет размер и ориентацию листа страницы.
marks
Добавляет обрезку и/или регистрационные отметки в документ.
bleed
Определяет степень заступа за пределы поля страницы, при котором отображаемая область страницы отрезается.

Формальный синтаксис

@page <page-selector-list> {
  <page-body>
}

где
<page-selector-list> = [ <page-selector># ]?
<page-body> = <declaration>? [ ; <page-body> ]? | <page-margin-box> <page-body>

где
<page-selector> = <pseudo-page>+ | <ident> <pseudo-page>*
<page-margin-box> = <page-margin-box-type> '{' <declaration-list> '}'

где
<pseudo-page> = : [ left | right | first | blank ]
<page-margin-box-type> = @top-left-corner | @top-left | @top-center | @top-right | @top-right-corner | @bottom-left-corner | @bottom-left | @bottom-center | @bottom-right | @bottom-right-corner | @left-top | @left-middle | @left-bottom | @right-top | @right-middle | @right-bottom

Примеры

Пожалуйста, обратитесь к различным плевдоклассам @page для примеров.

Спецификации

Спецификация Статус Комментарий
CSS Logical Properties and Values Level 1
Определение ':recto and :verso' в этой спецификации.
Редакторский черновик Добавлены селекторы страницы :recto и :verso
CSS Paged Media Module Level 3
Определение '@page' в этой спецификации.
Рабочий черновик Нет изменений для CSS Level 2 (Revision 1), хотя больше правил CSS можно использовать внутри @page.
CSS Level 2 (Revision 1)
Определение '@page' в этой спецификации.
Рекомендация Первое определение

Поддержка браузерами

 

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidEdge MobileFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
@pageChrome Полная поддержка 2Edge Полная поддержка 12Firefox Полная поддержка 19IE Полная поддержка 8Opera Полная поддержка 6Safari Нет поддержки НетWebView Android Полная поддержка 37Chrome Android Полная поддержка 18Edge Mobile Полная поддержка 12Firefox Android Полная поддержка 19Opera Android ? Safari iOS ? Samsung Internet Android ?
bleed descriptor
Экспериментальная
Chrome Нет поддержки НетEdge ? Firefox Нет поддержки НетIE Нет поддержки НетOpera Нет поддержки НетSafari Нет поддержки НетWebView Android Нет поддержки НетChrome Android Нет поддержки НетEdge Mobile ? Firefox Android Нет поддержки НетOpera Android Нет поддержки НетSafari iOS ? Samsung Internet Android Нет поддержки Нет
marks descriptor
Экспериментальная
Chrome Нет поддержки НетEdge ? Firefox Нет поддержки НетIE Нет поддержки НетOpera Нет поддержки НетSafari Нет поддержки НетWebView Android Нет поддержки НетChrome Android Нет поддержки НетEdge Mobile ? Firefox Android Нет поддержки НетOpera Android Нет поддержки НетSafari iOS ? Samsung Internet Android Нет поддержки Нет
size descriptor
Экспериментальная
Chrome ? Edge ? Firefox Нет поддержки НетIE Нет поддержки НетOpera ? Safari Нет поддержки НетWebView Android ? Chrome Android ? Edge Mobile ? Firefox Android Нет поддержки НетOpera Android ? Safari iOS ? Samsung Internet Android ?

Легенда

Полная поддержка  
Полная поддержка
Нет поддержки  
Нет поддержки
Совместимость неизвестна  
Совместимость неизвестна
Экспериментальная. Ожидаемое поведение может измениться в будущем.
Экспериментальная. Ожидаемое поведение может измениться в будущем.

Смотрите также

  • Смотрите тикет [META] CSS Paged Media Module Level 3 в Bugzilla для отслеживания прогресса по теме (базовый страничный счетчик, и т.д.)

Метки документа и участники

Внесли вклад в эту страницу: opereverzeva
Обновлялась последний раз: opereverzeva,