Un modo più rapido per sviluppare e testare i fogli di stile di stampa (evitare ogni volta l'anteprima di stampa)?

179

Questo è il mio processo in questo momento:

  1. Salva le modifiche in print.css
  2. Apri il browser e aggiorna la pagina.
  3. Fai clic con il pulsante destro del mouse e scegli Stampa> Anteprima di stampa (Firefox, ma qualsiasi browser in realtà)

È il passaggio 3 che mi dà fastidio e mi chiedo se sia possibile tagliarlo fuori dal processo con un plugin o qualcosa del genere. Basta scegliere di visualizzare una pagina come supporto di stampa, quindi semplicemente aggiornare per vedere le modifiche.

Come testare i fogli di stile di stampa? Fai sempre clic sull'anteprima di stampa dopo un aggiornamento?

css  firefox 
— Michael
fonte
Grazie per i suggerimenti, a tutti. Mi piacerebbe che Mozilla aggiungesse un'impostazione per gli sviluppatori per abilitare le funzionalità "Aggiorna" nella finestra dell'anteprima di stampa (non predefinito per evitare la confusione dell'utente finale, ovviamente). Questa è la mia soluzione ideale, perché (d'accordo con Faust) di solito ho bisogno di vederlo in Anteprima di stampa per mostrare esattamente come verrà visualizzato (immagini di sfondo, interruzioni di pagina, margini, ecc.). Chrome potrebbe aiutare un po 'poiché mostra un'anteprima per impostazione predefinita. Vedrò anche quel componente aggiuntivo Firefox PrintPreview raccomandato da slolife.
— Michael
Questo non funzionerà per Mac in quanto non esiste un'opzione Anteprima di stampa, tuttavia, potresti avere un'opzione PDF nella finestra di dialogo di stampa in cui puoi aprire un'anteprima "stampata" in un file PDF temporaneo. Non sono sicuro se questa funzione è integrata in OSX o perché ho installato Acrobat.
— Neil Monroe,
Basta fare un chiarimento, sembra che in OSX, l'opzione Anteprima di stampa non sia disponibile nel menu File ..., ma con l'estensione Anteprima di stampa / stampa, puoi avere un pulsante che lo avvia. addons.mozilla.org/en-US/firefox/addon/printprint-preview
— Neil Monroe

Risposte:

208

Puoi utilizzare l' emulazione del tipo di supporto Chrome come accettato nel post Vedi print css nel browser .

AGGIORNAMENTO 21/11/2017

Il documento DevTools aggiornato può essere trovato qui: Visualizza una pagina in modalità stampa .

Per visualizzare una pagina in modalità stampa:
1. Aprire il menu dei comandi . ( tl; dr Cmd+Shift+P (Mac) o Ctrl+Shift+P(Windows, Linux))
2. Inizia a digitare Renderinge seleziona Show Rendering.
3. Per il menu a discesa Emula CSS Media , selezionare stampa .

AGGIORNAMENTO 29/02/2016

I documenti DevTools sono stati spostati e il link sopra riportato fornisce informazioni inaccurate. I documenti aggiornati sull'emulazione del tipo di supporto sono disponibili qui: Stili di anteprima per più tipi di supporto .

Aprire il cassetto dell'emulazione DevTools facendo clic sull'icona Altre sostituzioni ••• Altre sostituzioni nell'angolo in alto a destra della finestra del browser. Quindi, selezionare Media nel riquadro di emulazione.

AGGIORNAMENTO 12/04/2016

Sfortunatamente, sembra che i documenti non siano stati aggiornati per quanto riguarda l'emulazione di stampa. Tuttavia, l'emulatore di supporti di stampa si è spostato (di nuovo):

  1. Apri Chrome DevTools
  2. Premi escsulla tastiera
  3. Fai clic su ell (puntini di sospensione verticali)
  4. Scegli il rendering
  5. Spuntare Emula supporti di stampa

Vedi lo screenshot qui sotto:

impostazioni di rendering 12/04/2016

AGGIORNAMENTO 28/06/2016

Google Developers Docs su Chrome DevTools e l'opzione "Emulate Media" sono stati aggiornati per Chrome> 51:

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

Per visualizzare una pagina in modalità anteprima di stampa, aprire il menu principale DevTools, selezionare Altri strumenti > Impostazioni rendering , quindi abilitare la casella di controllo emula con il menu a discesa impostato per stampare .

impostazioni di rendering 28/06/2016

AGGIORNAMENTO 24/05/2016

La denominazione delle impostazioni è cambiata ancora una volta:

Per visualizzare una pagina in modalità anteprima di stampa, aprire il menu principale DevTools, selezionare Altri strumenti > Rendering , quindi abilitare la casella di controllo Emula CSS Media con il menu a discesa impostato per stampare .

emulare i media CSS

— Patrik Affentranger
fonte
2
@SupaIrish Sì, per Firefox vedi la risposta di Szymon.
— djule5,
La documentazione è completamente obsoleta e non è presente alcun emulatore di supporti CSS ovunque all'interno dell'area "più sostituzioni". Dov'è andato?
— TetraDev,
2
Si trova sotto "console (esc)", quindi "3 punti verticali", quindi "rendering", quindi "emula i supporti di stampa" nella parte inferiore: perché così nascosto non ne ho idea.
— TetraDev,
su osx selezionando questa opzione non sembra fare nulla?
— v3nt
165

In Firefox è possibile digitare Shift+F2per aprire una riga di comando della barra degli strumenti per sviluppatori, quindi digitaremedia emulate print

Puoi anche emulare altri tipi di media in questo modo.

— Szymon Świtała
fonte
3
Ho notato che questo potrebbe non riflettere la stessa vista fornita nell'anteprima di stampa - soprattutto quando si tratta di spazi bianchi extra - assicurati che l'anteprima di stampa non sia diversa dopo aver terminato questo passaggio secondario.
— jave.web,
15
Purtroppo, il GLCI è stato abbandonato da Firefox con la versione 62. Un trascinamento.
— zerpsato il
4
Come abilitarlo senza GLCI (shift + F12)?
— StR
3
@StR È possibile emulare gli stili di stampa in Firefox un altro modo ora: stackoverflow.com/questions/47877112/...
— TylerH
2
Ho appena testato quello che ha detto @TylerH in Firefox v68 e funziona.
— StR
22

L' estensione della barra degli strumenti di Firefox + Web Developer ha un modo per abilitare / disabilitare vari fogli di stile.

Guarda sotto il menu CSS. C'è un menu per disabilitare e abilitare i singoli fogli di stile e anche un menu "Visualizza per tipo di supporto".

Inoltre, per ridurre i passaggi per accedere a PrintPreview in Firefox, prova l' estensione PrintPreview , che creerà un pulsante della barra degli strumenti.

Per Chrome, esiste una porta di tale estensione . Da quello che posso dire con la versione di Chrome, puoi scegliere "Mostra stili di stampa"

— slolife
fonte
12

Non userei alcun metodo di prova che non implichi l'anteprima di stampa. Ci sono troppe differenze: le immagini di sfondo non funzionano affatto nella stampa, ma appaiono in contesti di schermo normali, essendo le principali.

In Chrome, control+ppassa immediatamente alla stampa dell'anteprima. (Basta dimenticare di passare al mouse sulla barra dei menu). È abbastanza facile.

— Faust
fonte
Chrome sicuramente non si attacca a ciò che viene mostrato nell'emulazione dei supporti di stampa. Ho scoperto che se non hai la funzione di prestampa della query Chrome Media in esecuzione in meno di 2 ms, non cambierà la modifica.
— cchamberlain,
1
Il problema con l'anteprima di stampa è che non consente l'ispezione degli elementi, quindi il debug di elementi come riempimento e margini è estremamente difficile. Vedere questi elementi separatamente è la cosa migliore che puoi avere quando provi a eseguire il debug dei problemi della scatola.
— Seiyria,
6

È possibile semplicemente disabilitare gli stili dello schermo e modificare il tipo di supporto in "schermo" per il foglio di stile di stampa durante il test. Questo non sarà esattamente lo stesso dell'utilizzo di un'anteprima di stampa reale (interruzioni di pagina, larghezza del documento, ecc.), Ma ti darà comunque una buona idea.

— Leo
fonte
5

semplice per me (non avere @screenparti o simili 1 ) con FF :

  • metti la @media print { ...parte alla fine del tuo contenuto CSS
  • commentare solo la dichiarazione del wrapper/*@media print {*/ ... /*}*/
    • applicando così le cose di stampa ai tuoi stili sovrascrivendoli immediatamente dove applicabile
  • (Sto usando LiveReload quindi la mia pagina del browser si aggiorna immediatamente dopo aver salvato le modifiche)
  • ( altrimenti , se non si utilizza LiveReload :) premere CTRL+Rper ricaricare la pagina
  • ora puoi già fare molte regolazioni CSS tipiche della stampa (stile del carattere, dimensione del carattere, spaziature, colori) dove non è ancora necessaria l'anteprima di stampa
  • premere ALT+F+Vper aprire l'anteprima di stampa e ALT+Wper richiuderla

1 : se ne hanno uno, commentare in modo esplicito / in-commentato, a seconda dei media testati, altrimenti potrebbe non essere un grosso problema

— Andreas Dietrich
fonte
3

Come descritto in questo altro post ( utilizzando la finestra di ispezione degli elementi di Chrome in modalità Anteprima di stampa? ), Puoi utilizzare Chrome per emulare semplicemente il foglio di stile di stampa. Questo è fantastico in quanto puoi utilizzare l'ispettore per vedere da dove provengono gli stili piuttosto che indovinare quando viene visualizzata la finestra di dialogo di stampa.

Accedi alla finestra di dialogo Sostituisci impostazioni facendo clic sull'icona a forma di ingranaggio nell'angolo in basso a destra di Chrome Inspector Element. Quindi selezionare stampa come tipo di supporto di destinazione.

Eccezionale!

— Beneficenza
fonte
2

Almeno in Chrome: durante lo sviluppo, aggiungi al tag body onload="window.print()". Ciò farà aprire immediatamente la modalità di stampa dopo l'aggiornamento.

Sfortunatamente non sembra che gli strumenti di sviluppo siano molto utili poiché è essenzialmente un PDF incorporato.

Per inciso, ci sono modi per eliminare il passaggio 2. Uno popolare è LiveReload.

— nafg
fonte
0

Potresti provare a rimuovere temporaneamente il tuo foglio di stile normale e a caricare solo quello di stampa con un normale tag di collegamento.

— Andrea
fonte
0

In Chrome 62, cmd-R / cmd-P funziona bene su un Mac per visualizzare una bella anteprima di una pagina in stile di stampa @media.

Questo è accessibile tramite i puntini di sospensione verticali nella parte superiore destra della finestra del browser stesso (non Strumenti per sviluppatori) / Stampa ...

Utilizzare esc per annullare la finestra di anteprima.

Quindi, per il mio flusso di lavoro con IntelliJ IDEA e Chrome, è: cmd-s, cmd-tab, cmd-r, cmd-p, esc, cmd-tab e sono tornato nell'IDE.

Chrome 62 in Windows 10 ha lo stesso menu Stampa ... nello stesso posto, accessibile con ctrl-p: stampa in Chrome 62

— Mojo Techno
fonte
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.