@page

Правило 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 для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
@pageChrome Полная поддержка 2Edge Полная поддержка 12Firefox Полная поддержка 19IE Полная поддержка 8Opera Полная поддержка 6Safari Нет поддержки НетWebView Android Полная поддержка 37Chrome Android Полная поддержка 18Firefox Android Полная поддержка 19Opera Android ? Safari iOS Нет поддержки НетSamsung Internet Android Полная поддержка 1.0
bleed descriptor
Экспериментальная
Chrome Нет поддержки НетEdge Нет поддержки НетFirefox Нет поддержки НетIE Нет поддержки НетOpera Нет поддержки НетSafari Нет поддержки НетWebView Android Нет поддержки НетChrome Android Нет поддержки НетFirefox Android Нет поддержки НетOpera Android Нет поддержки НетSafari iOS Нет поддержки НетSamsung Internet Android Нет поддержки Нет
marks descriptor
Экспериментальная
Chrome Нет поддержки НетEdge Нет поддержки НетFirefox Нет поддержки НетIE Нет поддержки НетOpera Нет поддержки НетSafari Нет поддержки НетWebView Android Нет поддержки НетChrome Android Нет поддержки НетFirefox Android Нет поддержки НетOpera Android Нет поддержки НетSafari iOS Нет поддержки НетSamsung Internet Android Нет поддержки Нет
Page-margin boxes
Экспериментальная
Chrome Нет поддержки НетEdge Нет поддержки НетFirefox Нет поддержки НетIE Нет поддержки НетOpera Нет поддержки НетSafari Нет поддержки НетWebView Android Нет поддержки НетChrome Android Нет поддержки НетFirefox Android Нет поддержки НетOpera Android Нет поддержки НетSafari iOS Нет поддержки НетSamsung Internet Android Нет поддержки Нет
size descriptor
Экспериментальная
Chrome Нет поддержки НетEdge Нет поддержки НетFirefox Нет поддержки НетIE Нет поддержки НетOpera Нет поддержки НетSafari Нет поддержки НетWebView Android Нет поддержки НетChrome Android Нет поддержки НетFirefox Android Нет поддержки НетOpera Android Нет поддержки НетSafari iOS Нет поддержки НетSamsung Internet Android Нет поддержки Нет

Легенда

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

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

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