@page - Directive CSS
Résumé des caractéristiques de la directive @page
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 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.
@page
.
@page
.
size
(dimensions et/ou format des pages imprimées) associé à la directive @page
.
page-orientation
(portrait ou paysage) associé à la directive @page
.
@page
size
page-orientation
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.