HTML and CSS Reference
In-Depth Information
In questo esempio possiamo vedere che le caratteristiche del device in base alle quali sele-
zionare il CSS sono separate dalla parola chiave
and
e sono racchiuse tra parentesi tonde.
La parola chiave
and
indica che le caratteristiche specificate devono essere tutte vere
affinché il browser usi il CSS specificato. Oltre alla parola chiave
and
, possiamo utilizzare
altri operatori logici, come
not
per specificare una negazione e la virgola (,) per concate-
nare più condizioni di cui basta che una sola sia vera per selezionare il CSS. Un esempio di
come usare la virgola è mostrato nel codice che segue.
Esempio 5.13
@import url(stylesheet.css)
(device-width: 200px) and (device-height: 300px),
(device-width: 300px) and (device-height: 600px);
In questo caso, vengono considerate le due condizioni in maniera separata e se almeno una
è vera, il CSS viene selezionato.
L'ultima parola chiave da tenere a mente è
only
. Se la mettiamo all'inizio della media
query, i vecchi browser non capiscono la media query e quindi la ignorano. I nuovi browser
la tralasciano, prendendo in considerazione il resto della query. In questo modo possiamo
fare in modo che browser obsoleti non usino un CSS studiato per browser moderni.
nota
Quando specifichiamo più caratteristiche, il browser utilizza il primo CSS le cui
caratteristiche sono
tutte
rispettate dal device. Se anche una sola caratteristica
non è rispettata, il CSS non viene utilizzato.
Oltre alle dimensioni del device, possiamo anche selezionare un CSS in base alle dimen-
sioni del browser (quando si usa un computer, il browser può essere di dimensioni diverse
rispetto al monitor, in quanto possiamo ridimensionarlo come vogliamo), usando le clauso-
le
width
e
height
. Volendo, possiamo anche lavorare con dei range, aggiungendo i pre-
fissi
min-
e
max-
sia alle clausole
width
e
height
sia alle clausole
device-width
Esempio 5.14
@import url(stylesheet1024xt68min.css)
