Créez une page imprimable avec Gutenberg.css
Les concepteurs Web oublient souvent impression parce que cela semble beaucoup moins nécessaire de nos jours. Et cela peut être vrai pour des sites numériques comme BuzzFeed.
Cependant, sur sites d'information c’est toujours une bonne pratique d’offrir un feuille de style d'impression personnalisée. Heureusement, vous n'avez pas besoin de concevoir le vôtre, car Gutenberg est là pour aider.
Nommé d’après l’inventeur de la presse à imprimer Johannes Gutenberg, cette bibliothèque CSS est une ressource autonome pour imprimer des dessins de page.
Vous venez ajouter le gutenberg.css fichier dans votre tête de document, et vous êtes tous ensemble.
Chaque fois qu'un visiteur va imprimer votre page, il devrait relooker automatiquement basé sur les paramètres d'impression. Ceci peut être réglé en utilisant le media = "print" Attribut HTML.
Consultez ce guide si vous voulez en savoir un peu plus sur feuilles de style d'impression et comment ils travaillent.
La bonne chose à propos de Gutenberg est que vient avec des classes et des styles supplémentaires aussi.
Creusez dans le dossier des thèmes et vous trouverez trois thèmes d'impression alternatifs: livre, moderne, et style ancien. Vous pouvez en faire l'un des défaut en les ajoutant à la valeur par défaut gutenberg.css fichier.
En outre, vous pouvez style de la page différemment pour l'impression en ajoutant des classes CSS spécifiques. Par exemple le .pas d'impression la volonté de la classe cacher complètement un élément dans le style d'impression.
Un autre exemple est le ajout d'URL de liens à côté du texte. Gutenberg a ajouté cette fonctionnalité pour permettre aux internautes de trouver plus facilement les URL de votre page. Mais vous pouvez ajouter le .non reformaté classe sur l'élément d'ancrage à cacher l'URL.
Tout cela est couvert dans le dépôt GitHub et c'est très simple. Vous pouvez avoir Gutenberg installé en moins de 5 minutes et tout votre site sera facile à imprimer.
C'est de loin l'une des bibliothèques les plus simples et les plus cool à mettre en œuvre pour une meilleure performance du site. Il peut ajouter quelques Ko supplémentaires, mais l'expérience globale sera considérablement améliorée.
Si le contenu de votre site est susceptible d’être un jour imprimé pour une raison quelconque alors Gutenberg.css est une ressource indispensable.
