Page - Propriété CSS

page

Résumé des caractéristiques de la propriété page

Description rapide
Définit une page nommée (voir la directive @page) pour imprimer cet élément ou cette partie du document.
Statut
Standard
Valeurs prédéfinies
auto
Pourcentages
Ne s'appliquent pas.
Valeur initiale
auto
Héritée par défaut
Non. (1)
Type d'animation
Discrète : lors d'une animation, la propriété page passe d'une valeur à l'autre sans transition.
Module W3C
Module CSS - Media paginé
Références (W3C)
Statut du document: WD (document de travail)

(1) page ne s'hérite pas par défaut sauf si sa valeur est auto, auquel cas elle reprend la valeur de l'élément parent le plus proche qui a une valeur pour page.

Schéma syntaxique de page.

page - Syntax DiagramSyntax diagram of the page CSS property. auto auto id idpage:;page:;
Schéma syntaxique de la propriété page.
Les liens du schéma donnent accès à plus de détails.

Sur le schéma, les termes en gras sont les mots prédéfinis de CSS, les autres termes sont décrits ci-dessous :

  • id est un identifiant défini par une directive @page.

Description de la propriété page.

page définit quelle page nommée doit être utilisé pour imprimer l'élément ciblé. Les pages nommées sont définies par la directive @page et incluent le format des pages, leur orientation (portrait ou paysage), la présence de traits de coupe, etc. Il est ainsi possible d'imprimer différemment certaines parties du document.

A savoir aussi, concernant les pages imprimées.

Pseudo-classes pour cibler certaines pages.
Cette directive est un sélecteur qui cible les pages imprimées.
Définit la présence d'une marge supplémentaire pour les pages imprimées.
Choisit les traits de coupe et repères d'alignement.
Définit une page nommée (voir la directive @page) pour imprimer cet élément ou cette partie du document.
Définit si les pages imprimées doivent être tournées, et vers la droite ou la gauche.
S'utilise avec la directive @page.
Dimensions et orientation des pages imprimées.

Valeurs pour page.

  • page: auto;

    Dans le niveau 3 de la specification, cette valeur hérite de la valeur du parent. Mais attention ! Cela peut changer dans le niveau 4.

  • page: id;

    id est un identifiant qui a été défini par une directive @page. Dans l'exemple ci-dessous l'élément ciblé par <selector> sera imprimé en format paysage. Il s'agit généralement d'un élément important comme une section, un tableau, une grille, etc. Le changement de format de la page imprimée implique d'ajouter un saut de ligne avant et un saut de ligne après l'élément.

    @page edito { size: A4 landscape; } <selector> { page: edito; }
  • page: initial; (auto) page: inherit; page: revert; page: revertLayer; page: unset;

    Pour plus d'informations, reportez-vous aux pages de présentation de ces différentes valeurs : initial, inherit, revert, revert-layer, unset.

Animation de la propriété page.

La propriété page peut être animée de façon discrete (passage brutale d'une valeur à l'autre) mais les effets ne sont pas visibles à l'écran, mais seulement à l'impression.

Simulateur avec la propriété page.

La page nommé demo1 correspond à une format A4 en paysage. La page nommée demo2 à un format A5 en portait. Après avoir choisi une option, passez en mode aperçu pour voir l'effet. Avec certains navigateurs, la mise en page n'est pas recalculée : le tableau se s'imprime pas sur toute la largeur, ou alors le tableau est tronquée.

page :
Col 1
Col 2
Col 3
Col 4
Col 4
Col 6
Col 7
Col 8
Col 9
Col 10

Prise en charge de page par les navigateurs.

La propriété page est correctement reconnue par les navigateurs actuels.

Colonne 1
Reconnaissance par les navigateurs de la propriété page qui choisit une des pages nommées définies par la directive @page (utile pour les impressions).
1
Propriété
page
Estimation de la prise en charge globale.
94%

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

Safari

Safari sur IOS

Samsung Internet

Chrome

Edge

Firefox

Androïd Brower

Firefox pour Androïd

Chrome pour Androïd

KaiOS Browser

Opéra mini

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

Historique de la propriété page.

  • Module CSS - Media paginé - Niveau 3

    Concernant page. Introduction de la propriété page qui, en association avec la directive @page, permet de varier les formats d'impression au sein d'un même document.
    WD
    23 Juin 1999
    Document de travail.
    CR
    25 Février 2004
    Candidat à la recommandation.
    PR
    REC

Voir aussi...

page est une des rares propriétés concernant la mise en page qui ne s'applique pas à la directive @page. Elle est néanmoins décrite dans le module de spécification module CSS - Media paginé.

Sélecteurs :

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

Propriétés :

⚠
bleed
Définit la présence d'une marge supplémentaire pour les pages imprimées.
⚠
marks
Choisit les traits de coupe et repères d'alignement.
Page
Définit une page nommée (voir la directive @page) pour imprimer cet élément ou cette partie du document.
✗
page-break-after
Gestion des sauts de page après l'élément.
✗
page-break-before
Gestion des sauts de page avant l'élément.
✗
page-break-inside
Gestion des sauts de page au milieu de l'élément.
page-orientation
Définit si les pages imprimées doivent être tournées, et vers la droite ou la gauche.
S'utilise avec la directive @page.
size
Dimensions et orientation des pages imprimées.

Directives :

@page
Cette directive est un sélecteur qui cible les pages imprimées.