@page{} CSS règle

Définition de la CSS @page{}.

La règle CSS @page permet modifier des propriétés de marges css pour les supports d'impression au sein d'une même feuille de style.

Exemple d'écriture CSS de @page :
@page{
  margin: 2cm 1.5cm;
}
@page :left{
  margin: 2cm 1.5cm;
}
La règle CSS @page accepte comme propriétés CSS :
  • , gestion des marges extérieur de la page imprimée cible.
  • , gestion des marges intérieurs de la page imprimée cible.
  • , gestion des bordures de la page imprimée cible.
  • , gestion de l'arrière plan de la page imprimée cible.
  • page-break-*, gestion de changement de page.

La règle de feuille de style @page CSS accepte pour ciblage les pseudo-classes :
  • , cible la première page d'impression;
  • , cible les pages paires d'impression;
  • , cible les pages impaires d'impression;
Si vous ne mettez pas de pseudo-classe alors vous ciblez toutes les pages d'impression.

Problème d'interprétation de @page{} en Css.

La règle de feuille de style @page CSS pose des problèmes. La règle CSS @page est reconnue par FireFox 19+, Internet Explorer 8+ et Opera 7+.
Firefox 19+ ne reconnait que la règle CSS @page sans les les pseudo-classes.

Compatibilités navigateurs de la règle @page{}

Exemples et astuces CSS pour utiliser @page{}

Info complémentaire

Dans l'exemple de code de la propriété @page css, vous remarquez que la largeur de la zone du contenu est très petite.
Ce qui se passe c'est que le navigateur prend la plus petite largeur calculées soit largeur de la zone du contenu - les marges horizontales que vous avez spécifiées. Dans notre cas, la taille sera donc d'environ 21(*)-15 soit 6cm.
*) la longueur de la page d'impression fait 21cm (21x29.7cm pour le format classique A4).
Prenons un autre exemple :

Exemple de code :
@page : right{   margin: 2cm 1.5cm; } @page :left{   margin: 2cm 6cm; }

21-2*6 = 9cm < 21-2*1.5 = 18cm c'est donc une largeur de zone de contenue de 9cm qui sera appliquée.

Votre avis sur la définition @page{} en CSS

Votez pour la définition CSS @page{}

  • 1/5
  • 2/5
  • 3/5
  • 4/5
  • 5/5

Avis sur la page https://www.zonecss.fr/proprietes-css/page-css-regle.html Votes: 4.1 / 5 - 20 votes
Cliquez sur une étoile pour voter.