HTML and CSS Reference
In-Depth Information
Una delle caratteristiche più utili dei CSS risiede nel fatto che ci permettono di persona-
lizzare completamente lo stile di una pagina semplicemente cambiando le proprietà CSS e
senza toccare nulla nel codice HTML.
Così come possiamo cambiare lo stile di un sito, possiamo anche adattarne il contenuto
in base al device che lo visualizza. Per esempio, se il device su cui il sito è visualizzato è un
monitor in 16:9, potremmo ottimizzare la disposizione degli elementi in orizzontale; se il
device è uno smartphone (quindi un monitor di dimensioni ridotte), potremmo nascondere
alcuni elementi e ottimizzare la visualizzazione in verticale.
Creare un solo CSS che gestisce tutti i tipi di visualizzazioni è semplicemente impossi-
bile per l'enorme complessità di manutenzione. Per questo motivo, la tecnica migliore con-
siste nel creare un CSS per ogni tipo di visualizzazione che intendiamo supportare e creare
delle regole in base alle quali sarà il browser stesso a decidere quale CSS utilizzare.
Le specifiche CSS supportano la scelta del CSS da utilizzare in base a due caratteristi-
che: il tipo di device su cui viene visualizzato il sito e le sue caratteristiche.
Nel primo caso si distingue tra monitor, stampante e TV. Questa distinzione avviene
quindi in base al device e non in base alle sue caratteristiche. Questo significa che se vo-
lessimo applicare un CSS diverso a seconda della risoluzione del monitor o della TV non
potremmo farlo. Per questo la selezione del CSS in base alle caratteristiche è molto più uti-
le anche se esistono casi in cui differenziare per device può tornare comodo, come nel caso
si voglia usare un CSS differente per la stampa.
Grazie alle
media query
possiamo decidere quale CSS utilizzare, non solo in base al
device, ma anche in base alle sue caratteristiche tecniche come dimensioni, supporto ai co-
lori, risoluzione DPI e orientamento.
Cominciamo col vedere come supportare diversi CSS in base al tipo di device.
Supponiamo di avere una pagina in cui vogliamo che la dimensione del carattere sia di 12
pixel sul monitor e di 10 pixel in stampa. In questo caso possiamo scrivere il seguente co-
dice HTML.
Esempio 5.9
<html>
<head>
<title></title>
<style type="text/css">
