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.
@page
accepte comme propriétés CSS :-
margin
, gestion des marges extérieur de la page imprimée cible. -
padding
, gestion des marges intérieurs de la page imprimée cible. -
border
, gestion des bordures de la page imprimée cible. -
background
, 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 :-
:first
, cible la première page d'impression; -
:left
, cible les pages paires d'impression; -
:right
, cible les pages impaires 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{}
- Détails des versions de la CSS @page{}
- Règle
@page{}
est compatible avec CSS2 et plus.
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 :
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
Votes: 4.1 / 5 - 20
votes
Cliquez sur une étoile pour voter.