Introduzione ai CSS - Tipi di media
Monday 31 December 2007 Marco Bertoni, ultimo aggiornamento: Tuesday 19 August 2008.
E se volessimo destinare un foglio di stile a un particolare dispositivo?
Alcune proprietà possono essere condivise tra più dispositivi (media).
Il media di destinazione di un intero foglio di stile può essere specificato sia con l'attributo media degli elementi link e style di HTML, sia all'interno di una regola @import.
Ecco un esempio nel quale sono associati al documento tre fogli di stile destinati rispettivamente a tutti i dispositivi, ai dispositivi per la stampa e ai palmari o smartphone:
<link rel="stylesheet" href="all.css" type="text/css" media="all" /><link rel="stylesheet" href="print.css" type="text/css" media="print" /><link rel="stylesheet" href="handheld.css" type="text/css" media="handheld" />
Si possono indirizzare una o più regole a media specifici anche utilizzando la regola @media all'interno di un singolo foglio di stile.
Ecco un esempio:
body { font-size: 12px; }@media print {body { font-size: 10pt }}@media screen, print {body { line-height: 1.5; }}
In questo caso le dimensioni del testo per body sono quantificate in 12px (riga 1), quando il media di destinazione è una stampante il valore è pari a 10pt (righe da 2 a 4). Infine è impostato un valore per l'interlinea sia per lo schermo che per la stampa (righe da 5 a 7).
Nelle specifiche del linguaggio CSS sono elencati i tipi di media riconosciuti.
Tuesday 8 January 2008 17:35
Utile ricordare in tal senso le media queries dei CSS3:
@media handheld and (max-width: 350px) {body {width: 350px; max-width: 350px}
}
@media handheld and (max-width: 150px) {
body {width: 150px; max-width: 150px}
}
Anche se i CSS non sono un linguaggio di programmazione, la scelta operata a livello di cascata segue l’algoritmo di scelta if-else.
ciao :-)
Tuesday 8 January 2008 20:20
Ciao Gabriele, grazie per l’appunto!. Ricorda però che questa è una guida introduttiva ;), perché non scrivi qualche parola in più sulle media queries in modo semplice?