Perché le mie pagine web non stampano quello che vedo nel mio browser?
La ragione per cui alcune delle tue pagine web stampano in modo diverso è perché hanno un foglio di stile di stampa.
Cos'è un foglio di stile di stampa?
Un foglio di stile di stampa formatta una pagina web in modo che, quando viene stampata, venga automaticamente stampata in un formato di facile utilizzo. I fogli di stile di stampa esistono da molti anni e se ne è scritto molto. Eppure così pochi siti web li implementano, il che significa che ci ritroviamo con pagine web che frustratamente non vengono stampate correttamente su carta.
È notevole che così pochi siti web usino fogli di stile per la stampa come:
- I fogli di stile per la stampa migliorano enormemente l'usabilità, specialmente per le pagine con molto contenuto (come questa!)
- Sono incredibilmente veloci e facili da impostare
Alcuni siti web offrono un link a una versione della pagina adatta alla stampa, ma questo naturalmente deve essere impostato e mantenuto. Richiede anche che gli utenti notino questo link sullo schermo, e poi lo usino prima del modo normale in cui stampano le pagine (per esempio selezionando il pulsante di stampa nella parte superiore dello schermo). Le versioni di stampa sono comunque utili quando si stampa un certo numero di pagine web allo stesso tempo, come un articolo che si estende su diverse pagine web.
Fonte Disabilitare i fogli di stile per la stampa (CSS) quando si stampa un sito web
Come faccio a disabilitare un foglio di stile per la stampa?
Recentemente ho avuto bisogno di ottenere un'istantanea di un sito web esattamente come viene mostrato sul mio schermo. Cioè, volevo il colore dello sfondo, volevo le pubblicità, volevo il layout completo.
Un'opzione è quella di prendere screenshot sequenziali man mano che si scorre la pagina, poi rimetterli insieme in Photoshop. Questo richiede tempo e ti lascia un'immagine a bassa risoluzione (72dpi).
Un altro modo per farlo è stampare la pagina, poi “salvare come” PDF invece di stampare. Questo funziona abbastanza bene per le pagine che non definiscono un layout diverso per la stampa di una pagina rispetto alla visualizzazione della pagina.
Sfortunatamente per me, è diventato sempre più popolare includere un foglio di stile “stampa” su un sito web, che definisce nuovi stili di pagina quando un utente cerca di stampare il sito. Questo è definito nell'intestazione e assomiglia a questo:
Ho trovato solo un'opzione che soddisfa veramente i miei bisogni: L'add-on / estensione “Web Developer” sviluppato da Chris Pederick.
Con questo plugin puoi disabilitare molto facilmente TUTTI gli stili, gli stili predefiniti, gli stili in linea, gli stili incorporati e, hai indovinato, gli stili di stampa!
È attualmente disponibile per Firefox e Chrome. Spero davvero che un giorno arrivi un'estensione per Safari, dato che io uso principalmente Safari. L'unica opzione che ho trovato per Safari è quella di disabilitare TUTTI gli stili - una caratteristica che viene fornita di default con la versione più recente (5.0.3) del browser. Questo è utile durante lo sviluppo per vedere come il tuo sito sarà visto su un browser di solo testo, ma senza la possibilità di selezionare quali stili stai disabilitando ha un'utilità limitata.
Ecco un esempio di disabilitazione degli stili di stampa con l'estensione di cui sopra in Firefox:
Fonte Print stylesheet - the definitive guide