Nella prima parte della guida ai fogli di stile dedicati alla stampa abbiamo visto come in molti casi possa essere opportuno prevedere istruzioni CSS espressamente riferite alla stampa di una pagina web. Abbiamo anche detto che questo risultato può essere ottenuto utilizzando la proprietà @media in un CSS unico o attraverso un foglio di stile separato. In questa seconda guida vedremo in dettaglio il primo metodo.
La proprietà @media nei CSS
In un foglio di stile CSS la propriatà @media consente di definire blocchi di istruzioni che saranno utilizzate dal browser a seconda del ‘media’ su cui il contenuto della pagina dovrà essere visualizzato. Il media verrà quindi indicato subito dopo l’introduzione delle proprietà per cui ad esempio
@media screen
introdurrà il blocco di regole riferite alla visualizzazione sul monitor. Simmetricamente
@media print
introdurrà un blocco di regole valido per la stampa.
In base a queste considerazioni un foglio di stile contenente sia le istruzioni per la rappresentazione a video che quelle per la stampa avrà una struttura di questo tipo:
@media screen {
/*regole per la
visualizzazione a schermo */
}
@media print{
/* regole per
la stampa */
}
Nel primo blocco si andranno ad inserire tutte le regole relative al modo in cui il browser dovrà visualizzare la pagina web. A questo argomento sono dedicati molti articolo della guida ai CSS sviluppata nei mesi scorsi.
Il secondo blocco di codice CSS invece è relativo specificamente al layout di stampa. Un codice minimale che si potrebbe utilizzare a questo scopo è il seguente:
@media print{
body {
margin: 2cm;
color: black;
background-color: white;
}
}
Il codice è applicato all’elemento body in modo da essere esteso a tutta la pagina. Si sono poi impostati i margini della stampa a 2 cm, il colore del testo su nero (black) ed il colore dello sfondo su bianco (white).