Guide Complet sur les Médias Pagineux CSS pour les Débutants

Salut à toi, aspirant(e) développeur(euse) web ! Aujourd'hui, nous allons plonger dans le monde fascinant des Médias Pagineux CSS. Ne t'inquiète pas si tu n'en as jamais entendu parler auparavant – nous allons commencer par les bases et progresser pas à pas. À la fin de ce tutoriel, tu seras capable de créer des layouts d'impression époustouflants en utilisant CSS. Alors, c'est parti !

Qu'est-ce que les Médias Pagineux CSS ?

Les Médias Pagineux CSS sont un ensemble de fonctionnalités CSS qui te permettent de contrôler l'apparence de ton contenu web lorsqu'il est imprimé ou visualisé dans un format pagineux (comme un PDF). C'est comme donner à ton site web un lifting pour l'impression !

Imaginons que tu as créé un site web magnifique, mais lorsque tu essaies de l'imprimer, tout paraît sale et mal placé. C'est là que les Médias Pagineux CSS viennent à la rescousse ! Ils t'aident à maintenir le contrôle sur ton layout, même lorsqu'il n'est pas à l'écran.

Propriétés Reliées aux Médias Pagineux CSS

Voyons quelques-unes des propriétés clés qui rendent les Médias Pagineux CSS magiques :

Propriété	Description	Exemple
@page	Définit les dimensions et les marges d'une page	@page { size: A4; margin: 2cm; }
size	Définit la taille de la boîte de page	size: 8.5in 11in;
marks	Ajoute des repères de coupe et/ou des croix au document	marks: crop cross;
bleed	Spécifie la zone de bavure pour le contenu imprimé	bleed: 0.5cm;
page-break-before	Contrôle les sauts de page avant un élément	page-break-before: always;
page-break-after	Contrôle les sauts de page après un élément	page-break-after: avoid;
page-break-inside	Contrôle les sauts de page à l'intérieur d'un élément	page-break-inside: avoid;

Voyons quelques-unes de ces propriétés en action :

@page {
size: A4;
margin: 2cm;
@top-center {
content: "Mon Document Incroyable";
}
@bottom-right {
content: counter(page);
}
}

h1 {
page-break-before: always;
}

table {
page-break-inside: avoid;
}

Dans cet exemple, nous configurons une page A4 avec des marges de 2cm. Nous ajoutons un en-tête au centre de chaque page et des numéros de page en bas à droite. Nous nous assurons également que chaque h1 commence sur une nouvelle page et que les tables ne sont pas coupées entre les pages.

Règles CSS @-rules

Les règles CSS @-rules sont des déclarations qui indiquent à CSS comment se comporter. Elles commencent par un signe @ suivi d'un identifiant. Voyons quelques @-rules spécifiques aux Médias Pagineux :

@-rule	Description	Exemple
@page	Définit une boîte de page pour les médias pagineux	@page :first { margin-top: 10cm; }
@top-left	Définit le contenu du coin supérieur gauche de la page	@top-left { content: "Chapitre 1"; }
@top-center	Définit le contenu du centre supérieur de la page	@top-center { content: "Mon Livre"; }
@top-right	Définit le contenu du coin supérieur droit de la page	@top-right { content: date("yyyy-mm-dd"); }
@bottom-left	Définit le contenu du coin inférieur gauche de la page	@bottom-left { content: "Confidentiel"; }
@bottom-center	Définit le contenu du centre inférieur de la page	@bottom-center { content: "Copyright 2023"; }
@bottom-right	Définit le contenu du coin inférieur droit de la page	@bottom-right { content: counter(page); }

Voici un exemple de leur utilisation :

@page {
@top-center {
content: "Les Aventures d'Alice au Pays des Merveilles";
font-family: "Times New Roman", serif;
font-size: 12pt;
}
@bottom-right {
content: "Page " counter(page);
}
}

@page :first {
@top-center { content: none; }
@bottom-right { content: none; }
}

Dans cet exemple, nous ajoutons un en-tête à chaque page avec le titre du livre et les numéros de page en bas à droite. Nous supprimons également ces éléments de la première page pour un aspect plus propre de la page de titre.

Classes Pseudo-

Les classes pseudo- sont utilisées pour définir un état spécial d'un élément. Dans le contexte des Médias Pagineux, il y a plusieurs classes pseudo- utiles :

Pseudo-class	Description	Exemple
:first	Sélectionne la première page	@page :first { margin-top: 10cm; }
:left	Sélectionne toutes les pages de gauche	@page :left { margin-left: 4cm; }
:right	Sélectionne toutes les pages de droite	@page :right { margin-right: 4cm; }
:blank	Sélectionne toutes les pages blanches	@page :blank { @top-center { content: none; } }

Voyons comment les utiliser :

@page :first {
margin-top: 10cm;
@top-center { content: none; }
@bottom-right { content: none; }
}

@page :left {
margin-left: 4cm;
margin-right: 3cm;
@top-left {
content: "Les Aventures d'Alice au Pays des Merveilles";
}
}

@page :right {
margin-left: 3cm;
margin-right: 4cm;
@top-right {
content: "Chapitre " counter(chapter);
}
}

Dans cet exemple, nous créons un layout différent pour la première page, les pages de gauche et les pages de droite. La première page a une marge supérieure plus grande et pas d'en-tête ni de pied de page. Les pages de gauche ont le titre du livre dans le coin supérieur gauche, tandis que les pages de droite ont le numéro du chapitre dans le coin supérieur droit.

Conclusion

Et voilà, les amis ! Nous avons fait le tour du monde merveilleux des Médias Pagineux CSS. De la définition des tailles de page et des marges à la gestion des sauts de page et à l'ajout d'en-têtes et de pieds de page, tu dispose maintenant des outils pour créer des layouts d'impression magnifiques avec CSS.

Souviens-toi, la pratique rend parfait. Essaie d'expérimenter avec ces propriétés et ces @-rules dans tes propres projets. Tu pourrais être surpris(e) du contrôle que tu peux avoir sur tes layouts d'impression !

Bonne programmation, et que tes impressions soient toujours nettes et magnifiques !

Credits: Image by storyset