Une façon plus rapide de développer et de tester les feuilles de style pour l'impression (éviter l'aperçu avant impression à chaque fois) ?

Question

C'est le processus que je suis en train de suivre :

1. Enregistrer les modifications apportées au fichier print.css
2. Ouvrez le navigateur et actualisez la page.
3. Cliquez avec le bouton droit de la souris et choisissez Imprimer > Aperçu avant impression (Firefox, mais n'importe quel navigateur en fait).

C'est l'étape 3 qui me gêne et je me demande s'il est possible de la supprimer du processus avec un plugin ou autre. Il suffit de choisir d'afficher une page en tant que support d'impression, puis d'actualiser pour voir les changements.

Comment testez-vous vos feuilles de style pour l'impression ? Cliquez toujours sur l'aperçu avant impression après une actualisation ?

Answer 1

Vous pouvez utiliser le Chrome Emulation du type de support comme accepté dans le poste Voir imprimer les css dans le navigateur .

MISE À JOUR 21/11/2017

La documentation DevTools mise à jour est disponible ici : Visualiser une page en mode impression .

Pour visualiser une page en mode impression :
1. Ouvrir le Menu de commande . ( tl;dr Cmd+Shift+P (Mac) ou Ctrl+Shift+P (Windows, Linux))
2. Commencer à taper Rendering et sélectionnez Show Rendering .
3. Pour les Emuler les médias CSS dans le menu déroulant, sélectionnez imprimer .

---

MISE À JOUR 29/02/2016

La documentation de DevTools a été déplacée et le lien ci-dessus fournit des informations inexactes. La documentation mise à jour concernant l'émulation du type de média se trouve ici : Prévisualisation des styles pour davantage de types de médias .

Ouvrez le tiroir d'émulation DevTools en cliquant sur le bouton Plus de dérogations --- plus remplace l'icône dans le coin supérieur droit de la fenêtre du navigateur. Sélectionnez ensuite Les médias dans le tiroir d'émulation.

MISE À JOUR 12/04/2016

Malheureusement, il semble que la documentation n'ait pas été mise à jour en ce qui concerne l'émulation d'impression. Cependant, l'émulateur de support d'impression a été déplacé (une fois de plus) :

1. Ouvrir Chrome DevTools
2. Frapper esc sur votre clavier
3. Cliquez sur ⋮ (ellipse verticale)
4. Choisir Rendu
5. Coche S'inspirer de la presse écrite

Voir la capture d'écran ci-dessous :

MISE À JOUR 28/06/2016

Google Developers Docs autour de Chrome DevTools et l'option "Emulate Media" ont été mis à jour pour Chrome >51 :

https://developers.google.com/web/tools/chrome-devtools/settings?hl=en#emulate-print-media

Pour visualiser une page en mode aperçu avant impression, ouvrez le menu principal de DevTools, sélectionnez Plus d'outils > Paramètres de rendu puis activez la fonction émuler les médias avec le menu déroulant réglé sur imprimer .

MISE À JOUR 24/05/2016

La dénomination des paramètres a encore changé :

Pour visualiser une page en mode aperçu avant impression, ouvrez le menu principal de DevTools, sélectionnez Plus d'outils > Rendu puis activez la fonction Emuler les médias CSS avec le menu déroulant réglé sur imprimer .

Answer 2

Firefox + Barre d'outils du développeur Web permet d'activer/désactiver différentes feuilles de style.

Regardez dans le menu CSS. Il existe un menu permettant de désactiver et d'activer des feuilles de style individuelles, ainsi qu'un menu "Affichage par type de média".

Par ailleurs, pour réduire le nombre d'étapes à franchir pour accéder à PrintPreview dans Firefox, essayez l'option Extension PrintPreview qui créera un bouton dans la barre d'outils.

Pour Chrome, il existe un port de cette extension . D'après ce que j'ai pu constater avec la version Chrome, vous pouvez choisir "Afficher les styles d'impression"

Answer 3

Je n'utiliserais aucune méthode de test qui ne comporte pas d'aperçu avant impression. Il y a trop de différences : les images d'arrière-plan ne fonctionnent pas du tout à l'impression, mais s'affichent dans des contextes d'écran normaux, entre autres.

En chrome, control+p passe immédiatement à l'aperçu avant impression. (Oubliez la souris jusqu'à la barre de menu). C'est très simple.

Answer 4

Vous pouvez simplement désactiver vos styles d'écran et changer votre type de média en "écran" pour votre feuille de style d'impression pendant les tests. Cela ne sera pas exactement la même chose que d'utiliser un véritable aperçu avant impression (sauts de page, largeur du document, etc.), mais cela vous donnera une assez bonne idée.

Answer 5

Comme décrit dans cet autre billet ( Utiliser l'inspecteur d'éléments de Chrome en mode aperçu avant impression ? ), vous pouvez utiliser chrome pour émuler la feuille de style d'impression. C'est très pratique car vous pouvez utiliser l'inspecteur pour voir d'où viennent les styles plutôt que de deviner lorsque vous voyez la boîte de dialogue d'impression s'afficher.

Accédez à la boîte de dialogue Paramètres des dérogations en cliquant sur l'icône en forme de roue dentée dans le coin inférieur droit de l'inspecteur d'éléments de Chrome. Sélectionnez ensuite l'impression comme type de média cible.

Génial !