Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

@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é

Description du sélecteur @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.

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é . 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; } }

Prise en charge par les navigateurs (compatibilité).

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
Possibilité d'appliquer des styles aux pages imprimées, principalement via la directive @page.
Colonne 2
Prise en charge spécifique de la directive @page.
Colonne 3
Prise en charge du descripteur size (dimensions et/ou format des pages imprimées) associé à la directive @page.
Colonne 4
Prise en charge du descripteur page-orientation (portrait ou paysage) associé à la directive @page.
1
Printed pages
2
@page
3
size
4
page-orientation
Estimation de la prise en charge en pourcentage du parc actuel.
76%
77%
97%
74%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Androïd Brower

Baidu Browser

Chrome

Chrome pour Androïd

Edge

Firefox

Firefox pour Androïd

Internet Explorer

KaiOS Browser

Opéra

Opéra Mobile

QQ Browser

Safari

Safari sur IOS

Samsung Internet

Voir aussi, dans le même module de standardisation que @page.

Les spécifications CSS éditées par le W3C sont organisées en modules. @page fait partie du Module CSS - Media paginé (CSS Paged Media Module). Les définitions suivantes sont également décrites dans ce même module.

Sélecteurs.

Pseudo-classe désignant le première page.
Pseudo-classe désignant les pages de gauche (pages paires).
Pseudo-classe désignant les pages de droite (pages impaires).

Propriétés.

Choisit les traits de coupe et repères d'alignement.
Gestion des sauts de page après l'élément.
Gestion des sauts de page avant l'élément.
Gestion des sauts de page au milieu de l'élément.
Dimensions et orientation des pages imprimées.