Un moyen plus rapide de développer et de tester des feuilles de style d'impression (éviter l'aperçu avant impression à chaque fois)?

179

C'est mon processus en ce moment:

  1. Enregistrer les modifications dans print.css
  2. Ouvrez le navigateur et actualisez la page.
  3. Cliquez avec le bouton droit et choisissez Imprimer> Aperçu avant impression (Firefox, mais vraiment n'importe quel navigateur)

C'est l'étape 3 qui me dérange et je me demande s'il est possible de le supprimer du processus avec un plugin ou quelque chose. Choisissez simplement d'afficher une page en tant que support d'impression, puis actualisez simplement pour voir les modifications.

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

css firefox Michael
la source
Merci à tous pour les suggestions. J'adorerais que Mozilla ajoute un paramètre de développeur pour activer les capacités "Actualiser" sur la fenêtre d'aperçu avant impression (pas par défaut pour éviter la confusion de l'utilisateur final bien sûr). C'est ma solution idéale, car (d'accord avec Faust) j'ai généralement besoin de le voir dans l'aperçu avant impression pour montrer exactement comment il s'affichera (images de fond, sauts de page, marges, etc.). Chrome peut aider un peu car il affiche un aperçu par défaut. Je vais également regarder ce module complémentaire Firefox PrintPreview recommandé par slolife.
Michael
Cela ne fonctionnera pas pour Mac car il n'y a pas d'option Aperçu avant impression, cependant, vous pouvez avoir une option PDF dans votre boîte de dialogue d'impression où vous pouvez ouvrir un aperçu «imprimé» dans un fichier PDF temporaire. Je ne sais pas si cette fonctionnalité est intégrée à OSX ou parce que j'ai installé Acrobat.
Neil Monroe
Juste pour clarifier, il semble que dans OSX, l'option Aperçu avant impression n'est pas disponible dans le menu Fichier ..., mais avec l'extension Aperçu avant impression / impression, vous pouvez avoir un bouton qui la lance. addons.mozilla.org/en-US/firefox/addon/printprint-preview
Neil Monroe

Réponses:

208

Vous pouvez utiliser l' émulation du type de support Chrome comme accepté dans l'article Voir imprimer le css dans le navigateur .

MISE À JOUR 21/11/2017

Le document DevTools mis à jour peut être trouvé ici: Afficher une page en mode d'impression .

Pour afficher une page en mode d'impression:
1. Ouvrez le menu de commande . ( tl; dr Cmd+Shift+P (Mac) ou Ctrl+Shift+P(Windows, Linux))
2. Commencez à taper Renderinget sélectionnez Show Rendering.
3. Pour la liste déroulante Émuler le média CSS , sélectionnez Imprimer .

MISE À JOUR 29/02/2016

Les documents DevTools ont été déplacés et le lien ci-dessus fournit des informations inexactes. La documentation mise à jour concernant l'émulation de type de média peut être trouvée ici: Styles d'aperçu pour plus de types de média .

Ouvrez le tiroir d'émulation DevTools en cliquant sur l'icône Plus de remplacements ••• autres remplacements dans le coin supérieur droit de la fenêtre du navigateur. Ensuite, sélectionnez Média dans le tiroir d'émulation.

MISE À JOUR 12/04/2016

Malheureusement, il semble que les documents n'aient pas été mis à jour en ce qui concerne l'émulation d'impression. Cependant, l'émulateur de support d'impression a déménagé (à nouveau):

  1. Ouvrez Chrome DevTools
  2. Appuyez escsur votre clavier
  3. Cliquez sur ⋮ (points de suspension verticaux)
  4. Choisissez le rendu
  5. Cochez Émuler les médias imprimés

Voir la capture d'écran ci-dessous:

paramètres de rendu 04/12/2016

MISE À JOUR 28/06/2016

La documentation Google Developers sur Chrome DevTools et l'option "Emulate Media" ont été mises à jour pour Chrome> 51:

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

Pour afficher une page en mode d'aperçu avant impression, ouvrez le menu principal DevTools, sélectionnez Plus d'outils > Paramètres de rendu , puis activez la case à cocher émuler le support avec le menu déroulant défini pour imprimer .

paramètres de rendu 28/06/2016

MISE À JOUR 24/05/2016

La dénomination des paramètres a de nouveau changé:

Pour afficher une page en mode d'aperçu avant impression, ouvrez le menu principal DevTools, sélectionnez Plus d'outils > Rendu , puis cochez la case Émuler le média CSS avec le menu déroulant défini pour imprimer .

émuler un média CSS

Patrik Affentranger
la source
2
@SupaIrish Oui, pour Firefox, voyez la réponse de Szymon.
djule5
La documentation est complètement obsolète et il n'y a aucun média d'émulation css à l'intérieur de la zone "plus de remplacements". Où est-il allé?
TetraDev
2
Il est situé sous "console (esc)" puis "3 points verticaux" puis "rendu" puis "émuler les médias imprimés" en bas - pourquoi si caché je n'en ai aucune idée.
TetraDev
sur osx, la sélection de cette option ne semble rien faire?
v3nt
165

Dans Firefox, vous pouvez taper Shift+F2pour ouvrir une ligne de commande de la barre d'outils de développement, puis tapermedia emulate print

Vous pouvez également émuler d'autres types de médias de cette façon.

Szymon Świtała
la source
3
J'ai remarqué que cela pourrait ne pas refléter la même vue que celle fournie dans l'aperçu avant impression - en particulier en ce qui concerne les espaces blancs supplémentaires - assurez-vous que votre aperçu avant impression n'est pas différent une fois que vous avez terminé cette sous-étape.
jave.web
15
Malheureusement, le GLCI a été supprimé de Firefox avec la version 62. Un glissement.
zerpsed le
4
Comment activer cela sans le GLCI (shift + F12)?
StR
3
@StR Vous pouvez émuler les styles d'impression dans Firefox d'une autre manière maintenant: stackoverflow.com/questions/47877112/…
TylerH
2
Je viens de tester ce que @TylerH a dit dans Firefox v68 et cela fonctionne.
StR
22

L' extension de la barre d'outils Firefox + Web Developer permet d'activer / de désactiver diverses feuilles de style.

Regardez sous le menu CSS. Il existe un menu pour désactiver et activer les feuilles de style individuelles et un menu «Affichage par type de média».

Aussi, pour simplement réduire les étapes pour accéder à PrintPreview dans Firefox, essayez l' extension PrintPreview , qui créera un bouton de barre d'outils.

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

slolife
la source
12

Je n'utiliserais aucune méthode de test qui n'implique pas d'aperçu avant impression. Il y a trop de différences: les images d'arrière-plan ne fonctionnant pas du tout dans l'impression, mais apparaissant dans des contextes d'écran normaux en sont les principales.

Dans Chrome, control+ppasse immédiatement à l'aperçu avant impression. (Oubliez simplement la souris jusqu'à votre barre de menu). C'est assez simple.

Faust
la source
Chrome ne colle certainement pas à ce qui est montré dans l'émulation des supports d'impression. J'ai constaté que si vous ne disposez pas de la fonction de pré-impression de chrome media query en moins de 2 ms, elle ne peindra pas le changement.
cchamberlain
1
Le problème avec l'aperçu avant impression est qu'il ne permet pas l'inspection des éléments, il est donc extrêmement difficile de déboguer des éléments tels que le remplissage et les marges. Voir ces éléments séparément est la meilleure chose que vous puissiez avoir lorsque vous essayez de déboguer des problèmes de boîte.
Seiyria
6

Vous pouvez simplement désactiver vos styles d'écran et changer votre type de support en "écran" pour votre feuille de style d'impression pendant le test. Ce 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 donne quand même une assez bonne idée.

Leo
la source
5

simple pour moi (n'ayant pas de @screenpièces ou similaire 1 ) avec FF :

  • mettre la @media print { ...partie à la fin de votre contenu CSS
  • out-commenter uniquement la déclaration du wrapper/*@media print {*/ ... /*}*/
    • appliquant ainsi les éléments d'impression à vos styles en les remplaçant immédiatement le cas échéant
  • (J'utilise LiveReload donc ma page de navigateur s'actualise immédiatement après l'enregistrement des modifications)
  • ( sinon , si vous n'utilisez pas LiveReload :) appuyez CTRL+Rpour recharger la page
  • maintenant vous pouvez déjà faire beaucoup d'ajustements CSS d'impression typiques (style de police, taille de police, espacements, couleurs) là où on n'a pas encore besoin de l'aperçu avant impression
  • appuyez ALT+F+Vpour ouvrir l'aperçu avant impression et ALT+Wpour le refermer

1 : si on les a, les commenter / les commenter, en fonction de vos médias testés, peut ne pas être un gros problème sinon

Andreas Dietrich
la source
3

Comme décrit dans cet autre article ( Utilisation de l'inspecteur d'éléments de Chrome en mode Aperçu avant impression? ), Vous pouvez utiliser chrome pour simplement émuler la feuille de style d'impression. C'est génial car vous pouvez utiliser l'inspecteur pour voir d'où viennent les styles plutôt que de deviner lorsque la boîte de dialogue d'impression apparaît.

Accédez à la boîte de dialogue Paramètres de remplacement en cliquant sur l'icône d'engrenage dans le coin inférieur droit de l'inspecteur d'éléments de Chrome. Sélectionnez ensuite l'impression comme type de support cible.

Impressionnant!

Charité
la source
2

Au moins dans Chrome: lors du développement, ajoutez à la balise body onload="window.print()". Cela entraînera l'ouverture du mode d'impression immédiatement après l'actualisation.

Malheureusement, il ne semble pas que les outils de développement soient très utiles car il s'agit essentiellement d'un PDF intégré.

Soit dit en passant, il existe des moyens d'éliminer l'étape 2. L'une des plus courantes est LiveReload.

nafg
la source
0

Vous pouvez essayer de supprimer temporairement votre feuille de style régulière et de ne la charger que dans celle imprimée avec une balise de lien normale.

Andrew
la source
0

Dans Chrome 62, cmd-R / cmd-P fonctionne bien sur un Mac pour afficher un bel aperçu d'une page imprimée @media.

Ceci est accessible via l'élipse verticale en haut à droite de la fenêtre du navigateur elle-même (pas les outils de développement) / Imprimer ...

Utilisez esc pour annuler la fenêtre d'aperçu.

Donc, pour mon workflow avec IntelliJ IDEA et Chrome, c'est: cmd-s, cmd-tab, cmd-r, cmd-p, esc, cmd-tab et je suis de retour dans l'IDE.

Chrome 62 dans Windows 10 a le même menu Imprimer ... au même endroit, accessible avec ctrl-p: imprimer dans Chrome 62

Mojo Techno
la source