Un esempio vale più di mille parole? Sì, ma spiegato è meglio.
Prendiamo due fogli di stile banali e apparentemente uguali:
Codice HTML:
<style type='text/css' media='screen'>
body {background-color: white; color: red; font-style: verdana sans-serif; font-size: 1.0em; }
</style>
<style type='text/css' media='print'>
body {background-color: trasparent; color: black; font-style: verdana sans-serif; font-size: 12pt; }
</style>
A prima vista sembrano uguali, ma non lo sono; il primo per lo
screen definisce il colore di sfondo bianco e il colore del testo rosso, mentre la dimensione del font è di 1.0 em.
Mentre il secondo, per il media
print, definisce il colore dello sfondo come trasparent (attenzione se stampiamo su carta colorata questo paramentro diviene molto importante) e il colore del carattere come nero; ma non solo, definisce anche la dimensione del carattere in punti (pt).
Citazione:
Attenzione! apro una parentesi che riguarda la dimensione dei fonts:
em = emphatized.
pt = punti.
e ce ne sono pure altri, come le percentuali e i pixels.
Ma perchè ho scelto questi soltanto? La colpa è dei browser, essi fanno grande distinzione tra un tipo e l'altro, ma sopratutto fanno distinzione tra un tipo di browser ed un altro per quanto riguarda il modi di rendere e/o processare i pixels (da scartare sempre in ultima analisi), vediamo.
Pixel, vanno benissimo ma Explorer fissa il risultato e non lo modifica più, ciò vuol dire che se io non ci vedo bene e voglio leggermi comunque il testo che ho davanti (pensa che scemo!), se uso explorer non lo posso fare, quindii o cambio pagina o cambio browser.
Ma non solo, essendo legati al sistema operativo, su macchine non Windows, vedrò il mio testo molto più piccolo, tipicamente un sistema Mac vede il testo di circa 3 pixels più piccolo di un sistema Windows, quindi se date al font la dimensione 10px già di per se piccolo su Windows, su Mac risulterà illegibile.
Em e %, vanno per la maggiore perchè mi permettono di modificare la dimensione del testo a piacimento.
La regola vuole che comanda la prima clausola introdotta, quindi se nel body definisco ad esempio font-size: 1.0em in una prossima ridefinizione, ad esempio in una classe esso si aggiungerà a questo, ovvero: .link {font-size: 1.2em} vorrà dire che in tutte le classi richiamate con (.link) il testo sarà di 1.0em + 0.2 em = 1.2em. questo meccanismo fa sì che pur non sapendo quale sarà la dimensione del testo base, possiamo regolarci su di esso per sapere che ad esempio in link sarà di poco più grande (mediamente 3 pixel) che nel body.
Punti: fatidici e famigerati punti, sono stati inventati moltissimi anni fa, infatti risalgono all'invenzione dei giornali (non ve lo aspettavate), tutta colpa del time di londra.
Sono stati introdotti per avere una misura per i caratteri tipografici da impostare nella linotype, in pratica tutto parte dalla scritta Time in testata, la quale a misurarla era esattamente di 1/72 di pollice, detto questo, si sa che ogni punto successivo (a scalare) è in funzione di quella scritta.
I punti da allora sono rimasti tali e quali, e con l'introduzione degli word processor hanno assunto maggiore importanza.
Quindi i punti servono per definire il carattere tipografico e non il carattere a schermo, anche perchè questo è molto più piccolo nella resa, e varia da un sistema operativo all'altro e dalla risoluzione scelta dall'utente, mentre indipendentemente dal sistema operativo, sulle stampanti di tutto il mondo sono sempre uguali.
Finita questa lunga digressione sulla dimensione dei caratteri di stampa, vediamo cosa rimane da dire.
In genere i sistemi definiti con i
media servono per dire a quel media cosa visualizzare e cosa no e come, quindi in genere un sistema a fogli di stile sviluppato per una stampante (print) serve per migliorare la visibilità della pagina con questo dispositivo, i modi di collegare un foglio di stile ad hoc sono molti, si va dal semplice inserimento a cascata (prima uno e poi l'altro:
Codice HTML:
<link rel="stylesheet" type="text/css" href="index.css" media="screen">
<link rel="stylesheet" type="text/css" href="stampa.css" media="print">
al sistema usato di richiamare una pagina costruita apposta e richiamata da un link esterno.
Per esempio se abbiamo una tabella con elencati dei prodotti e questa tabella ha una sua formattazione a schermo, con molti colori, possiamo immaginare che in stampa una simile tabella può avere una resa orribile, oltretutto non tutti amano stampare le pagine web a colori, visto quel che costa una cartuccia di inchiostro, quindi con due fogli di stile, uno
screen che mi definisce i colori a schermo, ed uno
print che mi ridefinisce una tabella nero su bianco per la stampante, risolvo elegantemente il problema.
Ma come faccio a far capire alla stampante che mi deve leggere un foglio di stile piuttosto che un altro?
Qui sta il bello, non dovete fare altro che collegare alla pagina il foglio di sitile con uno dei modi definito sopra o nell'altro cerotto (
N°1) quindi stampo.
O be posso fare il fico (:roll:) e prevedere in un punto qualsiasi della pagina un pulsante di stampa, così:
Citazione:
html: <input class='print' type='button' value='Stampami' onClick='Print()' >
css-screen: nulla di che, al limite formattare il colore, ma la classe print deve esistere, magari vuota: .print {}
css-print: la classe print viene definita così: .print {display: none}
Così a stampa il pulsante non viene visualizzato sul foglio, risparmiando inchiosto e sopratutto migliorando la qualità dello stampato ;)
