Larègle @CSS@page est utilisée pour modifier différents aspects des pages imprimées. Elle permet de cibler et de modifier les dimensions, l'orientation et les marges de la page. La règle@page peut s'appliquer à toutes les pages d'une impression ou à un sous-ensemble grâce à ses différentes pseudo-classes.

Syntaxe

/* Cible toutes les pages */@page {  size: 8.5in 9in;  margin-top: 4in;}/* Cible toutes les pages paires */@page :left {  margin-top: 4in;}/* Cible toutes les pages impaires */@page :right {  size: 11in;  margin-top: 4in;}/* Cible tous les sélecteurs avec `page: wide;` défini */@page wide {  size: a4 landscape;}@page {  /* zone de marge en haut à droite affichant le numéro de page */  @top-right {    content: "Page " counter(pageNumber);  }}

Propriétés de page

La règle@page ne peut contenir que des descripteurs de page et desrègles de marge. Les descripteurs suivants ont été implémentés par au moins un navigateur :

margin

Définit les marges de la page. Les propriétés individuellesmargin-top,margin-right,margin-bottom etmargin-left peuvent aussi être utilisées.

page-orientation

Définit l'orientation de la page. Cela n'affecte pas la mise en page : la rotation est appliquée après la mise en page sur le support de sortie.

size

Définit la taille cible et l'orientation du bloc englobant de la boîte de page. Dans le cas général, où une boîte de page est rendue sur une feuille de page, cela indique aussi la taille de la feuille de destination.

La spécification mentionne que les propriétés CSS suivantes pourraient s'appliquer aux boîtes de page via la règle @page. Cependant, elles ne sontpas encore prises en charge par les navigateurs.

Description

La règle @page définit les propriétés de la boîte de page. La règle@page est accessible via l'interface du modèle objet CSSCSSPageRule.

Propriétés associées

La règle@page permet d'attribuer un nom à la règle, qui pourra ensuite être utilisé dans une déclaration via la propriétépage.

page

Permet à un sélecteur d'utiliser unepage nommée définie par l'utilisateur·ice.

Syntaxe formelle

@page =
  @page<page-selector-list>? {<declaration-rule-list> }

<page-selector-list> =
<page-selector>#

<page-selector> =
[<ident-token>?<pseudo-page>*]!

<pseudo-page> =
  :[left|right|first|blank]

Où<page-body> inclut :

• page-properties
• page-margin properties

et<pseudo-page> représente ces pseudo-classes :

• :blank
• :first
• :left
• :right

Règles de marge

Les règles de marge sont utilisées à l'intérieur de la règle@page. Chacune cible une section différente de la page imprimée, en stylisant la zone de la page imprimée selon les valeurs définies dans le bloc de style :

@page {  @top-left {    /* page-margin-properties */  }}

@top-left cible le coin supérieur gauche du document et applique les modifications selon les propriétés de marge définies.

Les autres règles de marge incluent :

@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

Propriétés de marge de page

Les propriétés de marge de page sont l'ensemble des propriétés CSS pouvant être définies dans une règle de marge individuelle. Elles incluent :

Pages nommées

Les pages nommées permettent de réaliser une mise en page par page et d'ajouter dessauts de page de manière déclarative lors de l'impression.

Les pages nommées peuvent être appliquées à l'aide de la propriétépage. Cela permet de créer différentes configurations de page à utiliser dans les mises en page d'impression.

Un exemple de ceci se trouve dans les exemples de la pagepage.

Exemples

Utiliser la propriété size pour changer l'orientation de la page

Cet exemple montre comment diviser les<section> en pages individuelles au formatlandscape, chaque page ayant une marge de 20 % lors de l'impression.Cliquer sur le bouton d'impression ouvrira la boîte de dialogue d'impression avec les sections HTML réparties sur des pages distinctes.

<button>Print page</button><article>  <section>    <h2>Header one</h2>    <p>Paragraph one.</p>  </section>  <section>    <h2>Header two</h2>    <p>Paragraph two.</p>  </section>  <section>    <h2>Header three</h2>    <p>Paragraph three.</p>  </section></article>

const button = document.querySelector("button");button.addEventListener("click", () => {  window.print();});

@page {  size: landscape;  margin: 2cm;}section {  page-break-after: always;  break-after: page;}@media print {  button {    display: none;  }}

body {  font-family: "Helvetica", sans-serif;  background-color: silver;}article {  width: 100%;}section {  display: grid;  background-color: white;  border-radius: 0.6rem;  justify-items: center;  padding: 1rem;  width: 50%;  print-color-adjust: exact;  -webkit-print-color-adjust: exact;  margin: 0 auto;  margin-block-end: 1rem;  border: 1px dashed;}

Exemples de pseudo-classes @page

Voir les différentespseudo-classes de@page pour des exemples.

• :blank
• :first
• :left
• :right

Spécifications

Compatibilité des navigateurs

Voir aussi

• La propriétépage
• Le descripteursize de@page
• Le moduledes médias paginés CSS
• Le ticket[META] CSS Paged Media Module Level 3^(angl.) du Bugzilla pour suivre l'avancement du sujet (compteurs par page, etc.)