Sommario
Alcune proprietà CSS sono concepite solo per determinati media (per esempio, la proprietà'cue-before' per i programmi utente acustici [aural]). A volte, tuttavia, fogli di stile per differenti tipi di media possono condividere una proprietà, ma richiedono differenti valori per quella proprietà. Per esempio, la proprietà 'font-size' è utile sia per i media a schermo [screen] che per quelli a stampa [print]. Tuttavia, i due media sono abbastanza differenti da richiedere differenti valori per la proprietà comune; un documento di norma avrà bisogno di un font [carattere] più grande su uno schermo di computer che sulla carta. L'esperienza dimostra anche che i caratteri sans-serif [senza grazie ,come per esempio l'Arial] sono più facili da leggere sullo schermo, mentre i caratteri serif [con grazie, come per esempio il Times New Roman] sono più facili da leggere sulla carta. Per questi motivi, è necessario dire che un foglio di stile -- o una sezione di un foglio di stile -- si applica a determinati tipi di media.
Ci sono attualmente due modi di specificare le dipendenze dal mezzo [media, plurale di medium] per i fogli di stile:
@import url("loudvoice.css") aural;
@media print {
/* style sheet for print goes here */
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>Link to a target medium</TITLE>
<LINK rel="stylesheet" type="text/css"
media="print, handheld" href="foo.css">
</HEAD>
<BODY>
<P>The body...
</BODY>
</HTML>
La regola @import è definita nel capitolo sulla cascata.
Una regola @media specifica i tipi di media d'arrivo (separati da virgole) di un insieme di regole (delimitato da parentesi graffe). Il costrutto @media permette ai fogli di stile regole per vari media nel medesimo foglio di stile:
@media print {
BODY { font-size: 10pt }
}
@media screen {
BODY { font-size: 12pt }
}
@media screen, print {
BODY { line-height: 1.2 }
}
Un tipo di media CSS nomina un insieme di proprietà CSS. Un programma utente che dichiari di supportare un tipo di media secondo il nome deve implementare tutte le proprietà che si applicano a quel tipo di media.
I nomi scelti per i tipi di media CSS riflettono i dispositivi d'arrivo per i quali le proprietà rilevanti hanno senso. Nel seguente elenco di tipi di media CSS, le descrizioni interposte non sono normative. Danno solo il senso del dispositivo al quale il tipo di media fa riferimento.
I nomi dei tipi di media non sono sensibili alle maiuscole e alle minuscole.
A causa dei rapidi cambiamenti nelle tecnologie, i CSS2 non specificano un elenco definitivo di tipi di media che possono essere valori per @media.
Nota. Le future versioni dei CSS possono ampliare questo elenco. Gli autori non dovrebbero far riferimento a nomi di tipi di media che non sono ancora definiti da una specifica CSS.
Ciascuna definizione di proprietà CSS specifica i tipi di media per i quali la proprietà deve essere implementata da un programma utente conforme. Poichè le proprietà generalmente si applicano a diversi media, la sezione "Si applica al media" di ogni definizione di proprietà elenca i gruppi di media piuttosto che i singoli tipi di media. Ogni proprietà si applica a tutti i tipi di media nei gruppi di media elencati nella sua definizione.
I CSS2 definiscono i seguenti gruppi di media:
La seguente tabella mostra le relazioni fra gruppi di media e tipi di media:
| Tipi di media | Gruppi di media | |||
|---|---|---|---|---|
| continui/a pagina | visuali/acustici/tattili | a griglia/bitmap | interattivi/statici | |
| acustici | continui | acustici | N/A | entrambi |
| braille | continui | tattili | a griglia | entrambi |
| stampati in rilievo | a pagine | tattili | a griglia | entrambi |
| palmari | entrambi | visuali | entrambi | entrambi |
| stampa | a pagine | visuali | bitmap | statici |
| proiezione | a pagina | visuali | bitmap | statici |
| schermo | continui | visuali | bitmap | entrambi |
| tty | continui | visuali | a griglia | entrambi |
| tv | entrambi | visuali, acustici | bitmap | entrambi |