Page 143 - Guida tascabile HTML5
P. 143
Approfondiamo ulteriormente il discorso, per capire come combinare più
parametri attraverso i tradizionali operatori logici e avere un controllo
estremamente preciso sulla selezione dei dispositivi.
Il primo operatore è and, con il quale si stabilisce che tutte le condizioni devono
verificarsi contemporaneamente:
print and (min-resolution:300dpi)
La condizione si verificherà solo quando il contenuto viene stampato, e la
stampante garantisce una risoluzione di almeno 300dpi.
Un secondo operatore, che permette di concatenare più condizioni alternative, è
la virgola, che assume il valore dell’operatore logico or:
braille , embossed
La condizione sarà verificata quando il dispositivo si identifica come braille
oppure come embossed.
I due operatori possono essere utilizzati insieme per creare condizioni più
complesse:
screen and (pointer:coarse) , all and (hover:none)
Questa media query è composta da due condizioni alternative: un display con
controllo del puntatore limitato o qualsiasi dispositivo che non consente interazioni
di tipo hover.
L’operatore not, la negazione, consente di specificare condizioni per esclusione:
not print and (monochrome)
Questa media query sarà verificata quando non si ha a che fare con una
stampante in bianco e nero.
TERMINOLOGIA Il concetto di media query è stato introdotto con HTML4, ma molti
dettagli e la concatenazione di più parametri sono stati aggiunti più avanti. Per
garantire la compatibilità con i sistemi meno recenti, è stata introdotta la keyword
only: anteposta a una query fa in modo che, quando un client non è in grado di
interpretare correttamente la concatenazione, l’intera media query venga ignorata:
only print and (color)
In questo modo non si rischierà che client meno recenti interpretino erroneamente la
query (per esempio tralasciando la parte da and in poi) causando per esempio
l’applicazione non corretta di regole CSS.
Conclusioni
Questo breve approfondimento ha fornito una panoramica sulla sintassi e sulle
possibilità messe a disposizione dalle media query, da utilizzare con l’attributo