Une façon plus rapide de développer et de tester des feuilles de style d'impression (éviter de prévisualiser l'impression à chaque fois)?

Ceci est mon processus:

  1. Enregistrer les modifications apportées à l'impression.css
  2. ouvrir le navigateur et rafraîchir la page.
  3. clic droit et choisir Imprimer > Print Preview (Firefox, mais tout navigateur vraiment)

c'est l'étape 3 qui me dérange et je me demande s'il est possible de le couper du processus avec un plugin ou quelque chose. Il suffit de choisir de voir une page en tant que médias imprimés, et puis tout simplement rafraîchir voir les changements.

comment testez-vous vos feuilles de style d'impression? Avez-vous toujours cliquez sur aperçu avant impression après un rafraîchissement?

148
demandé sur Michael 2012-03-01 20:03:03

10 réponses

vous pouvez utiliser le Chrome émulation de type de média comme accepté dans le post voir imprimer css dans le navigateur .

mise à jour 21/11/2017

la mise à jour de DevTools doc peut être trouvée ici: voir une page en mode d'impression .

pour voir une page en mode impression:

1. Ouvrez le Menu de commande . ( tl;dr Cmd+Shift+P (Mac) ou Ctrl+Shift+P (Windows, Linux))

2. Commencez à taper rendant et sélectionnez Show Rendering .

3. Pour le émuler CSS Media sélectionner imprimer .


mise à jour 29/02/2016

Les Docs de DevTools ont bougé et le lien ci-dessus fournit des informations inexactes. Les docs mis à jour concernant l'émulation de type de média peuvent être trouvés ici: Preview styles pour plus de types de médias .

ouvrir le tiroir D'émulation DevTools en cliquant sur le plus de dérogations • • * plus de dérogations icône dans le coin supérieur droit de la fenêtre d'affichage du navigateur. Ensuite, sélectionnez Media dans le tiroir d'émulation.

mise à jour 12/04/2016

malheureusement, il semble que les docs n'ont pas été mis à jour en ce qui concerne l'émulation d'impression. Cependant, l'émulateur de la presse écrite a bougé (à nouveau):

  1. Ouvrez Google Chrome DevTools
  2. Hit esc sur votre clavier
  3. Click alternate (ellipse verticale)
  4. Choisir Rendre
  5. Tique Émuler des supports d'impression

voir la capture d'écran ci-dessous:

rendering settings 12/04/2016

mise à JOUR 28/06/2016

les développeurs Google Docs autour de Chrome DevTools et l'option" Émulate 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 Prévisualisation, ouvrez le menu principal de DevTools, sélectionnez plus D'outils > paramètres de rendu , et ensuite, activez la case à cocher émuler les médias avec le menu déroulant imprimer .

rendering settings 28/06/2016

mise à jour 24/05/2016

le nom des paramètres ont changé une fois de plus:

pour visualiser une page en mode Prévisualisation, ouvrez le menu principal DevTools, sélectionnez plus D'outils > Rendu , puis activer la émuler CSS Media case à cocher avec le menu déroulant imprimer .

emulate CSS media

174
répondu Patrik Affentranger 2017-11-21 09:43:09

dans Firefox, vous pouvez taper Shift+F2 pour ouvrir une ligne de commande de la barre d'outils du développeur, puis taper media emulate print

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

160
répondu Szymon Świtała 2015-03-05 08:47:24

Firefox + Web Developer toolbar extension a un moyen d'activer/désactiver diverses feuilles de style.

regardez sous le menu CSS. Il y a un menu pour désactiver et activer les feuilles de style individuelles et un menu "Affichage par type de média" aussi bien.

aussi, pour réduire les étapes pour se rendre à PrintPreview dans Firefox, essayez le PrintPreview extension , qui créera un bouton de barre d'outils.

pour Chrome, il y a un port de cette extension . De ce que je peux dire avec la version Chrome, vous pouvez choisir "Afficher les styles d'impression"

20
répondu slolife 2012-03-01 17:57:01

Je n'utiliserais aucune méthode de test qui n'implique pas de prévisualisation de l'impression. Il y a trop de différences: les images d'arrière-plan ne fonctionnent pas du tout dans l'impression, mais apparaissent dans des contextes d'écran normaux en étant le principal parmi eux.

dans Chrome, control+p va immédiatement à l'impression de prévisualisation. (Juste oublier moissonner jusqu'à votre barre de menu). C'est assez facile.

10
répondu Faust 2012-03-01 16:34:22

vous pourriez tout 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. Ce ne sera pas exactement la même que l'utilisation d'un réel aperçu avant impression (sauts de page, largeur, etc.), mais il vous donne une assez bonne idée.

5
répondu Leo 2012-03-01 16:12:33

simple pour moi ( n'ayant pas de @screen parties ou similaires 1 ) avec FF :

  • mettez la @media print { ... partie à la fin de votre contenu CSS
  • out-comment seulement la déclaration d'emballage /*@media print {*/ ... /*}*/
    • appliquer ainsi la substance d'impression à vos styles les annuler immédiatement le cas échéant
  • (j'utilise " LiveReload ainsi mon page de navigateur rafraîchit immédiatement après sauver changements)
  • ( sinon , si vous n'utilisez pas LiveReload :) appuyez sur CTRL+R pour recharger la page
  • maintenant, vous pouvez déjà faire beaucoup de réglages typiques d'impression CSS (style de police, taille de police, espacements, couleurs) où l'on n'a pas encore besoin de l'aperçu d'impression
  • appuyez sur ALT+F+V pour ouvrir l'aperçu avant impression et ALT+W pour le fermer de nouveau

1 : si on les a, en-dehors - / en-commentant ceux-ci, en fonction de vos médias testés, peut pas être une grosse affaire sinon

3
répondu Andreas Dietrich 2015-01-11 01:19:50

comme décrit dans cet autre post ( utilisant L'Inspecteur D'éléments de Chrome en mode Prévisualisation D'impression? ), vous pouvez utiliser chrome pour émuler simplement 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 quand vous voyez le dialogue d'impression apparaître.

accédez à la boîte de dialogue "Overrides Settings" en cliquant sur l'icône gear dans le coin inférieur droit de L'Inspecteur D'éléments de Chrome. Ensuite, sélectionnez l'impression que la cible type de média.

génial!

2
répondu Charity 2017-05-23 12:10:47

au moins dans Chrome: pendant le développement, ajouter à l'étiquette de carrosserie onload="window.print()" . Le mode d'impression s'ouvrira immédiatement après le rafraîchissement.

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

incidemment, il y a des moyens d'éliminer l'étape 2. L'une des plus populaires est LiveReload.

1
répondu nafg 2014-12-14 22:40:05

vous pouvez essayer de retirer temporairement votre feuille de style régulière, et charger seulement dans l'impression une avec une étiquette de lien normal.

0
répondu Andrew 2012-03-01 16:16:07

dans Chrome 62, cmd-R/cmd-P fonctionne bien sur un Mac pour afficher un bel aperçu d'une page de style @media print.

ceci est accessible par l'elipsis vertical en haut à droite de la fenêtre du navigateur elle-même (pas les outils de développement) / Print...

utiliser esc pour annuler la fenêtre de prévisualisation.

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 la même impression... menu au même endroit, accessible avec ctrl-p: print in Chrome 62

0
répondu Mojo Techno 2017-11-28 13:13:03