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:
- Enregistrer les modifications apportées à l'impression.css
- ouvrir le navigateur et rafraîchir la page.
- 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?
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électionnezShow 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):
- Ouvrez Google Chrome DevTools
- Hit esc sur votre clavier
- Click alternate (ellipse verticale)
- Choisir Rendre
- Tique Émuler des supports d'impression
voir la capture d'écran ci-dessous:
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 .
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 .
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.
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"
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.
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.
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 etALT+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
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!
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.
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.
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: