Un moyen plus rapide de développer et de tester les feuilles de style d’impression (éviter à chaque fois l’aperçu avant impression)?
Ceci est mon processus en ce moment:
- Enregistrer les modifications dans print.css
- Ouvrez le navigateur et actualisez la page.
- Cliquez avec le bouton droit de la souris et choisissez Imprimer> Aperçu avant impression (Firefox, mais tout navigateur en réalité).
C'est la troisième étape qui me dérange et je me demande s'il est possible de le supprimer du processus avec un plugin ou quelque chose du genre. Choisissez simplement d'afficher une page en tant que support d'impression, puis actualisez-le simplement pour voir les modifications.
Comment testez-vous vos feuilles de style d'impression? Avez-vous toujours cliquer sur Aperçu avant impression après une actualisation?
Vous pouvez utiliser le Chromeémulation du type de support tel qu'accepté dans le message voir print css dans le navigateur .
MISE À JOUR DU 21/11/2017
La documentation DevTools mise à jour peut être trouvée ici: Voir 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. Commencer à écrire Rendering et sélectionnezShow Rendering.
3. Pour le menu déroulant Emulate CSS Media , sélectionnez print .
UPDATE 29/02/2016
Les documents DevTools ont été déplacés et le lien ci-dessus fournit des informations inexactes. Les documents mis à jour concernant l'émulation de type de média peuvent être trouvés ici: styles de prévisualisation pour plus de types de média .
Ouvrez le tiroir d'émulation de DevTools en cliquant sur l'icône Plus de substitutions ••• plus de substituts dans le coin supérieur droit de la fenêtre du navigateur. Ensuite, sélectionnez Média dans le tiroir d'émulation.
UPDATE 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 déplacé (à nouveau):
- Ouvrez Chrome DevTools
- Frappé esc sur votre clavier
- Cliquez sur ⋮ (Ellipsis vertical)
- Choisissez le rendu
- Cochez Émulez les supports d'impression
Voir la capture d'écran ci-dessous:
UPDATE 28/06/2016
La documentation Google relative aux développeurs 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=fr#emulate-print-media
Pour afficher une page en mode Aperçu avant impression, ouvrez le menu principal de DevTools, sélectionnez Autres outils > Paramètres de rendu , puis activez la case à cocher émuler le support avec le menu déroulant défini sur print .
UPDATE 24/05/2016
La dénomination des paramètres a encore changé:
Pour afficher une page en mode Aperçu avant impression, ouvrez le menu principal de DevTools, sélectionnez Autres outils > Rendu , puis activez la case à cocher Emulate CSS Media avec le menu déroulant défini sur print .
Dans Firefox, vous pouvez taper Shift+F2 pour ouvrir une ligne de commande de la barre d'outils de développeur, puis taper media emulate print.
Vous pouvez également émuler d'autres types de média de cette façon.
Firefox + barre d'outils Web Developer l'extension permet d'activer/désactiver diverses feuilles de style.
Regardez dans le menu CSS. Il existe un menu pour désactiver et activer les feuilles de style individuelles et un menu "Afficher par type de support".
En outre, pour réduire les étapes nécessaires pour accéder à PrintPreview dans Firefox, essayez le 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 je peux dire avec la version Chrome, vous pouvez choisir "Afficher les styles d'impression".
Je n'utiliserais aucune méthode de test n'impliquant pas l'aperçu avant 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, étant la principale d'entre elles.
Sous Chrome, control+p lance immédiatement l'aperçu avant impression. (Il suffit d’oublier de passer la souris dans la barre de menu). C'est assez facile.
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 les tests. Ce ne sera pas exactement la même chose que d'utiliser un véritable aperçu avant impression (sauts de page, largeur de document, etc.), mais cela vous donne quand même une très bonne idée.
simple pour moi (ne pas avoir _@screen_ parts ou similaire1) avec FF :
- placez la partie _
@media print { ..._ à la fin de votre contenu CSS - out-comment uniquement la déclaration d'encapsuleur
/*@media print {*/ ... /*}*/- appliquant ainsi le texte imprimé à vos styles en les remplaçant immédiatement le cas échéant
- (J'utilise LiveReload donc mon la page du navigateur est actualisée immédiatement après avoir enregistré les modifications)
- ( sinon , si vous n'utilisez pas LiveReload :) appuyez sur
CTRL+Rpour recharger la page - vous pouvez déjà effectuer un grand nombre d'ajustements CSS d'impression typiques (style de police, taille de la police, espacements, couleurs) lorsque vous n'avez pas encore besoin de l'aperçu avant impression
- appuyez sur
ALT+F+Vpour ouvrir l'aperçu avant impression etALT+Wpour le refermer
1: si on les a, commenter ceux-ci, selon les médias testés, peut ne pas être grave, sinon
Comme décrit dans cet autre article ( = (Utilisation de l'Inspecteur des é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 formidable, 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 s’affiche.
Accédez à la boîte de dialogue Paramètres de remplacement en cliquant sur l'icône représentant une roue dentée dans le coin inférieur droit de l'inspecteur d'éléments de Chrome. Puis sélectionnez imprimer comme type de support cible.
Impressionnant!
Au moins dans Chrome: au cours du développement, ajoutez à la balise body onload="window.print()". Le mode d’impression s’ouvrira 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 incorporé.
Incidemment, il existe des moyens d’éliminer l’étape 2. LiveReload est l’un des plus populaires.
Vous pouvez essayer de supprimer temporairement votre feuille de style habituelle et de ne charger que celle qui est imprimée avec une balise link normale.
Dans Chrome 62, cmd-R/cmd-P fonctionne bien sur un Mac pour afficher un bel aperçu de la page avec le style d'impression @media.
Ceci est accessible via les elipsis verticaux en haut à droite de la fenêtre du navigateur lui-même (pas les outils de développement)/Imprimer ...
Utilisez echap pour annuler la fenêtre d'aperçu.
Donc, pour mon flux de travail avec IntelliJ IDEA et Chrome, il s'agit de: cmd-s, cmd-tab, cmd-r, cmd-p, esc, cmd-tab et je suis de retour dans l'EDI.
Chrome 62 sous Windows 10 a le même menu Imprimer ... au même endroit, accessible avec ctrl-p: 