I media type nei CSS

In genere siamo abituati a includere i nostri CSS nella pagina senza usare l'attributo media.

In verità è un attributo molto importante perchè ci permette di differenziare i CSS a seconda del dispositivo che accede alla pagina.

Un tipo lo abbimo già visto in questo articolo, ed è quello relativo alla stampa:

<link type="text/css" rel="stylesheet" href="/site/template/css/print.css" media="print" />

Come vedete ho usato il media print.

Vediamo una lista abbastanza completa di media-type:

all -> per tutti i dispositivi

braille -> specficio per i dispositivi di feedback tattile

embossed -> specifico per stampanti Braille

handheld -> specifico per palmari

print -> per la stampa in generale

projection -> specifico per presentazione da proiettare

screen -> specifico per schermi a colori

speech -> specifico per sintetizzatori vocali

tty -> specifico per i media che usano una griglia a caratteri con dimensione fissa (come i terminali)

tv -> specifico per i dispositivi TV

In generale o non troviamo nulla o screen per il web, e print se si vuole impaginare il testo specifico per la stampa.

Come avete visto prima basta impostare il media quando includete il foglio di stile.

Un'altra opzione sennò impostare il tutto direttamente dentro al file CSS:

@media print {

    body {

         font-size: 15px;

    }

}

@media screen {

    body {

        font-size: 12px;

    }

}

Questa forma però è poco usata perchè in generale sarebbe meglio tenere separati i vari stili!