HTML and CSS Reference
In-Depth Information
Queste tecniche sono decisamente migliori di quelle viste nell'esempio 5.9 . Tuttavia pre-
sentano l'inconveniente di dover specificare in ogni pagina il file CSS da utilizzare in base
al device. Possiamo migliorare ulteriormente la situazione creando un nuovo file CSS e in-
serendo al suo interno le direttive import viste nel precedente esempio. In questo modo,
nella pagina faremo riferimento a un solo file CSS al quale demandiamo la gestione del
tipo di device. Questa tecnica è mostrata nell'esempio 5.11 .
Esempio 5.11
<!—- registrazione del file CSS nella pagina -->
<link rel="stylesheet" href="stylesheetmain.css" />
<!—- codice del file stylesheetmain.css -->
@import url(stylesheetscreen.css) print;
@import url(stylesheetprint.css) screen;
A questo punto sappiamo come registrare un file CSS in base al device e come ottimizzare
questa registrazione. Adesso vediamo come personalizzare ulteriormente il processo di
scelta del CSS in base alle caratteristiche tecniche del device.
Utilizzare un CSS in base alle caratteristiche del device
Come detto in precedenza, le caratteristiche tecniche del device in base alle quali selezio-
nare il CSS da utilizzare sono fisse e sono: dimensioni, orientamento e rapporto tra dimen-
sioni e scala di colori. Partiamo col vedere come selezionare il CSS da utilizzare in base
alle dimensioni del device.
Dimensioni
Sicuramente la discriminante più usata per selezionare un CSS è la dimensione del device,
in quanto i nostri siti devono essere visualizzabili su browser di dimensioni eterogenee:
dallo smartphone al monitor da 27 pollici alla TV. Nel prossimo esempio vediamo come
specificare un CSS diverso in base alle dimensioni attraverso le clausole device-width
e device-height .
Esempio 5.12
@import url(stylesheet400x600.css)
(device-width: 400px) and (device-height: 600px);
 
Search WWH ::




Custom Search