10Aug

Geek Rants: Perché così tanti siti Web non riescono a utilizzare i fogli di stile di stampa?

Non cessa mai di stupirmi che le persone devono cercare un link o un pulsante che dice “Stampa” su una pagina web, soprattutto se si considera c'è una tecnologia di miracolo che rende questo passo inutile. Purtroppo quasi nessuno lo usa, anche se ha. .. 10 anni.

Non solo è sciocco richiedere un ulteriore passaggio per la stampa, ma l'uso di fogli di stile di stampa consente di risparmiare inchiostro per chiunque non usi il collegamento stampabile. E naturalmente, c'è un sacco di persone che usano la stampa su PDF per salvare gli articoli per dopo senza sprecare carta.

Che cosa sono i fogli di stile di stampa?

La maggior parte dei siti Web implementa la propria funzione di stampa portandosi su un'altra pagina, che è formattata in modo diverso per le stampanti, ma ciò non è necessario. Ogni browser implementa una semplice tecnologia CSS nota come Print Stylesheets, che non è altro che un file che specifica gli elementi da nascondere quando il browser stampa la pagina.

Per coloro che non hanno familiarità, CSS significa Cascading Style Sheets, ed è come il browser sa come formattare il codice sorgente HTML di una pagina Web in quello che in realtà si vede sullo schermo. Tutto da caratteri, colori, bordi e persino immagini di sfondo può essere specificato nel foglio di stile.

L'aggiunta di un foglio di stile di stampa è semplice come collegare questa singola linea nella tua pagina HTML-parte dei media = stampa del codice indica al browser di utilizzare solo questo foglio di stile per la stampa.

& lt; link rel = "stylesheet" href = "print.css" type = "text / css" media = "print" & gt;

Questo file è di solito qualcosa di simile:

#sidebar, #footer, #navigation, #sharinglinks, #topad, #commenti{ display: none}

Sì, è davvero così semplice come sembra. Quindi, come funziona? Ecco un esempio di una normale pagina web sulla sinistra, con tutta la navigazione, il logo e gli annunci ben visibili con l'ID associati - e, sulla destra, la stessa pagina con il foglio di stile di stampa applicate, nascondendo tutti questi elementi.

Ovviamente preferiresti stampare uno di questi sull'altro, giusto?

Esempi di errori nel foglio di stile di stampa

Sfortunatamente, ci sono solo un sacco di enormi siti Web che non si sono preoccupati di implementare questo. Dai un'occhiata a cosa succede quando provi a stampare dal New York Times:

Alcuni siti, come la rete di siti Gawker, sono anche peggio. Non solo non hanno una vista stampabile, quando si prova e si stampa, assomiglia a zuppa d'inchiostro. Per quanto ne sappiamo, non c'è modo di stampare da un sito Gawker senza utilizzare un servizio separato come Readability, o di evidenziare manualmente il contenuto della pagina, che è quasi impossibile sul loro nuovo design.

È triste, davvero. Carichi dei siti più grandi non riescono proprio a disturbare l'implementazione di questa funzione.

Per fortuna, alcuni siti li usano

Ecco un esempio di una vista stampabile correttamente formattata - senza doversi preoccupare di trovare un collegamento di stampa. Il sito di BBC News forma in modo ordinato gli articoli per la stampa, completi di un'intestazione personalizzata. Includono i commenti nella visualizzazione di stampa, ma è ancora un lavoro ben fatto.

Ci sono molti altri siti che fanno lo stesso, come ArsTechnica e. .. il nostro sito, ma sarebbe sciocco mostrare gli screenshot di tutti loro. Nella nostra ricerca, i siti che li hanno implementati correttamente sono pochi e distanti tra loro.

Quindi per concludere. .. per favore prendi i 5 minuti necessari per implementare un foglio di stile di stampa per il tuo sito!