@page - Directive CSS

@page

Résumé des caractéristiques de la directive `@page`

Description rapide

Caractéristiques de la page, à l'impression.

Statut

Standard

Module W3C

Module CSS - Media paginé

Références (W3C)

🡇

🡅

CSS Paged Media Module Level 3

Statut du document: WD (document de travail)

Cascading Style Sheets Level 2 - Revision 1 Specification

Statut du document: REC (recommandation)

Description de la directive `@page`.

@page est un sélecteur pour définir certains paramètres d'impression. Il peut être utilisé seul ou en combinaison avec les pseudo-classes suivantes :

:first désigne la première page du document.
:left désigne les pages de gauche.
:right désigne les pages de droite.
:blank désigne les pages vides. Des pages vides peuvent apparaître à la suite de sauts de page forcés.

Remarque : suivant les règles de l'imprimerie, les pages de gauche sont censées avoir des numéros pairs, et les pages de droite avoir des numéros impairs.

Toutes les propriétés CSS ne peuvent pas être appliquées au sélecteur @page. Voici la liste des propriétés applicables à @page :

size : dimensions et orientation de la page.
margin : marges autour de la page.
padding : marges intérieures autour de la page.

Enfin, d'autres propriétés sont théoriquement applicables au sélecteur @page mais sont très peu prises en compte par les navigateurs.

border : bordures autour de la page.
background : couleur ou texture en fond de page. Par défaut les navigateurs n'impriment pas les textures ou les couleurs d'arrière-plan. Reportez-vous à la propriété color-adjust pour plus de précisions sur ce sujet.
marks : marques de coupure ou d'alignement.
bleed :

Remarque : ce sélecteur est pour le moment très mal géré par l'ensemble des navigateurs.

Exemples d'utilisation de la directive `@page`.

L'effet des propriétés CSS associées à @page n'est pas visible sur l'écran : vous devrez imprimer la page, ou au moins l'afficher en aperçu avant impression pour voir l'effet des styles appliquées à cette page.

En fonction de ces règles, et sur l'aperçu avant impression, la première page doit être en format portrait (vertical), tandis que les pages suivantes seront orientées en paysage.

Les blocs de marges. ⚠

Les blocs de marge sont des zones rectangulaires disposées autour du contenu du document, donc dans les marges. Du contenu peut être inséré dans ces blocs avec la propriété content. Cela peut servir par exemple à créer des en-têtes ou pieds de pages.

Les blocs de marge

Les blocs dans les angles top-left-corner par exemple, ont des dimensions en rapport avec la taille des marges.
Les blocs en haut et en bas ont une hauteur définie par la taille des marges haute et basse. Leur largeur dépend de la largeur du contenu.
A l'inverse, les blocs situés à gauche et à droite ont une largeur définie d'après la taille des marges gauche et droite. Leur hauteur dépend de la hauteur du contenu.

Voici un exemple d'utilisation des blocs de marges :


	@page {
	   size: A4;
	   margin: 2cm;
		
	   @top-center {content: "Rapport annuel";}
	   @bottom-center {
	      content: "- " counter(page) " -";
	      border: solid 1px black;
	   }
	}

Insertion d'une directive `@page` par programme.

Utiliser Javascript pour définir une directive `@page`.

L'exemple de code ci-dessous crée un élément style dans la section head. Il est facile d'insérer n'importe quel code CSS dans ce nouvel élément.


	let oldStyle=document.getElementById('style1');
	try{document.head.removeChild(oldStyle);} catch(e){}
	
	const newStyle = document.createElement('style');
	newStyle.id='style1';
	newStyle.innerHTML = '@page {size:A4; margin:1cm;}';
	document.head.appendChild(newStyle);

Utiliser JQuery pour définir une directive `@page`.

Les codes JQuery sont généralement plus courts que les codes Javascript, mais les actions réalisées par le code ci-dessous sont exactement les mêmes que celles effectuées par le code précédent.


	$('#style1').remove();
	$('<style>', {
		id: 'style1',
		html: '@page {size:A4; margin:1cm;}'
	}).appendTo('head');

Manipulations de la directive `@page` par programme.

Les navigateurs ne se pressent pas pour mettre en forme les pages imprimées. Il est vrai que ce n'est pas le besoin le plus courant lors de la consultation des pages Web.

Colonne 1

Support général de la directive @page permettant de cibler les pages imprimées.

Colonne 2

Support par les navigateurs du descripteur size pour la directive @page. Il permet de définir les dimensions de la page imprimée.

Colonne 3

Support par les navigateurs du descripteur page-orientation. Il permet de définir l'orientation des pages imprimées, portrait ou paysage.

Colonne 4

Support de la pseudo-classe :first, utilisée avec @page, et permettant de cibler la première page imprimée.

Colonne 5

Support des pseudo-classes left et right avec la directive @page, permettant de distinguer les pages gauche et droite lors de l'impression.

Colonne 6

Support des blocs de marges avec la directive @page, pour cibler des zones dans les en-tête et pied de page.

Directive
@page

Descripteur
size

Descripteur
page-orientation

Pseudo-classe
:first

Pseudo-classes
:left et :right

Blocs de
marges

Estimation de la prise en charge globale.

90%

95%

93%

67%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

UC Browser pour Androïd

Opéra Mobile

QQ Browser

Baidu Browser

Opéra

Chrome

Safari

Firefox

Safari sur IOS

Edge

Chrome pour Androïd

Samsung Internet

Androïd Brower

Firefox pour Androïd

KaiOS Browser

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Évolution de la directive `@page`.

CSS 2.1 - Spécification concernant les feuilles de styles en cascade - Révision 1

Introduction de la directive @page, avec des possibilités relativement limitées dans cette version 2.xx de CSS : elle permet seulement de définir les marges de la page imprimée, en distinguant pages gauches, page droites et première page.

04 Novembre 1997
Document de travail.
24 Mars 1998
Proposé à la recommandation.
11 Mai 1998
Recommandation.
Module CSS - Media paginé - Niveau 3

La directive @page s'enrichit : possibilité de définir les dimensions et l'orientation des pages, et introduction des zones d'en-tête et de pied de page.

23 Juin 1999
Document de travail.
25 Février 2004
Candidat à la recommandation.

Voir aussi, au sujet de la pagination.

La spécification "Module CSS - Media paginé" regroupe tout ce qui concerne la pagination : mise en forme des pages imprimées, taille des pages, gestion des sauts de page, etc. Vous pouvez consulter cette norme ici : CSS Paged Media Module.