Page 138 - Guida tascabile HTML5
P. 138
approfondimento si pone come obiettivo l’analisi della sintassi utilizzata per le
media query da utilizzare con l’attributo media per controllare, tra le altre cose,
l’applicazione di tali fogli di stile.
TERMINOLOGIA L’attributo media è previsto per i tag <link> e <style>, legati ai fogli di
stile CSS, e per i tag <a>, <area>, e <source> in cui suggerisce il supporto ideale con cui
fruire la risorsa collegata.
Per comprendere la logica di applicazione delle media query iniziamo
analizzando un esempio molto semplice, estratto dalla sezione <head> di un
documento HTML:
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="stampa.css" media="print">
La seconda riga, in cui è specificato l’attributo media="print" sarà presa in
considerazione dal browser solo quando la pagina sarà destinata alla stampa: le
regole di stile contenute nel file stampa.css saranno importate solo in quel caso,
garantendo un’impaginazione ottimizzata per il tipo di supporto (per esempio
sfondo bianco e testo nero, per una migliore leggibilità).
<a href="videoHD.htm" media="(min-width:1920px)">Video HD</a>
<a href="videoSD.htm" media="(max-width:1919px)">Video SD</a>
In questo esempio la sintassi suggerisce che la pagina destinazione del primo
link è adatta quando la fruizione avviene in finestre con dimensione orizzontale
superiore a 1920px, mentre la seconda pagina nelle finestre con dimensione
orizzontale inferiore a 1919px.
ATTENZIONE Nel caso del tag <a>, l’attributo media rappresenta solo un’informazione
aggiuntiva a disposizione del browser.
Il tipo di dispositivo
Il primo parametro con cui specificare l’applicabilità di regole CSS è il tipo di
supporto su cui verrà visualizzato il contenuto: già nell’esempio del precedente
paragrafo è stato illustrato l’utilizzo di media="print" per specificare azioni legate
alla stampa del documento. Ecco l’elenco dei dispositivi (device) supportati.
all: è il valore di default (può essere omesso) che sottintende la validità delle
regole per qualsiasi supporto.
braille: fa riferimento a dispositivi con feedback tattile (il contenuto non si
potrà basare su caratterizzazioni visuali).
