Guide Complet sur l'Impression CSS pour Débutants
Salut à toi, futurs maîtres de CSS ! Aujourd'hui, nous allons plonger dans le monde fascinant de l'impression CSS. En tant que votre enseignant informatique de quartier, je suis excité de vous faire découvrir ce voyage. Ne vous inquiétez pas si vous n'avez jamais écrit une ligne de code auparavant - nous allons commencer par les bases et progresser pas à pas. Alors, prends une tasse de café (ou de thé, si c'est ton truc), et c'est parti !
Impression CSS - Utilisation d'une Feuille de Style d'Impression
As-tu déjà essayé d'imprimer une page web pour découvrir qu'elle ne ressemble en rien à ce que tu vois à l'écran ? C'est là que les feuilles de style d'impression entrent en jeu ! Elles sont comme des sorts magiques qui transforment ton contenu web en formats imprimeurs friendly.
Commençons par un exemple simple :
<head>
<link rel="stylesheet" type="text/css" href="screen.css" media="screen">
<link rel="stylesheet" type="text/css" href="print.css" media="print">
</head>Dans cet extrait, nous disons au navigateur d'utiliser différentes feuilles de style pour l'écran et l'impression. L'attribut media est notre arme secrète ici. Lorsque tu visualises la page sur un écran, elle utilise screen.css. Mais appuie sur ce bouton d'impression, et hop ! print.css prend le relais.
Impression CSS - Utilisation de Media Queries et de la Règle @page
Maintenant, levons notre jeu avec les media queries et la règle @page. Ce sont comme le duo dynamique de l'impression CSS !
@media print {
body {
font-size: 12pt;
color: #000;
background-color: #fff;
}
@page {
margin: 1in;
}
}Ce code dit : "Bonjour navigateur, lorsque tu imprimes, rend le texte en 12pt, noir sur blanc, et donne-moi des marges de 1 pouce tout autour." La partie @media print est notre media query, et @page configure notre mise en page.
Impression CSS - Détection des Demandes d'Impression
Ne serait-il pas génial si ta page web pouvait savoir quand quelqu'un essaie de l'imprimer ? Eh bien, c'est possible ! Voici comment :
window.addEventListener('beforeprint', function() {
console.log('Impression...');
});
window.addEventListener('afterprint', function() {
console.log('Impression terminée');
});Ce morceau de JavaScript est comme un petit espion qui nous chuchote lorsque l'impression commence et se termine. Très pratique pour faire des ajustements de dernière minute !
Impression CSS - Utilisation de la Règle @page
La règle @page est comme une baguette magique pour contrôler tes pages imprimées. Voyons-la en action :
@page {
size: A4;
margin: 0;
}
@page :first {
margin-top: 2cm;
}Ici, nous définissons toutes les pages en taille A4 sans marges, mais donnons à la première page une marge supérieure spéciale de 2cm. C'est comme rouler la red carpet pour ton contenu !
Impression CSS - Utilisation de la Media Query
Nous avons déjà vu @media, mais penchons-nous plus en détail :
@media print {
.no-print {
display: none;
}
a[href^="http"]:after {
content: " (" attr(href) ")";
}
}Ce fragment masque les éléments avec la classe no-print et ajoute l'URL après tout lien externe. C'est comme avoir un assistant personnel qui nettoie ta page web pour l'impression !
Impression CSS - Utilisation de l'Événement afterprint
Souviens-toi de notre petit espion JavaScript précédent ? Mettons-le au travail :
window.addEventListener('afterprint', function() {
document.body.style.backgroundColor = 'lightblue';
alert('J'espère que tu as apprécié ton tirage !');
});Ce code change la couleur de fond en bleu clair après l'impression et affiche un message amical. C'est comme laisser un petit mot de remerciement pour tes utilisateurs !
Impression CSS - Lien Vers une Feuille de Style Externe
Pour finir, récapitulons comment lier une feuille de style d'impression externe :
<link rel="stylesheet" type="text/css" href="print.css" media="print">Cette ligne est ton billet doré pour des pages web imprimeurs friendly. Crée simplement un fichier nommé print.css, ajoute tes styles d'impression, et c'est parti !
| Méthode | Description | Exemple |
|---|---|---|
| Feuille de Style d'Impression | Fichier CSS séparé pour le média d'impression | <link rel="stylesheet" type="text/css" href="print.css" media="print"> |
| Media Queries | Rules CSS qui s'appliquent uniquement lors de l'impression | @media print { body { font-size: 12pt; } } |
| Règle @page | Contrôle les propriétés spécifiques à la page | @page { margin: 1in; } |
| Détection des Demandes d'Impression | JavaScript pour détecter les tentatives d'impression | window.addEventListener('beforeprint', function() { ... }); |
| Événement afterprint | JavaScript pour exécuter du code après l'impression | window.addEventListener('afterprint', function() { ... }); |
Et voilà, les amis ! Tu viens de faire tes premiers pas dans le monde de l'impression CSS. Souviens-toi, la pratique fait toujours perfection, alors n'ayez pas peur d'expérimenter. Qui sait ? Tu pourrais devenir le Picasso des feuilles de style d'impression ! Jusqu'à la prochaine fois, bon codage !
Credits: Image by storyset