Proprietà media dell'elemento HTML <source>
Definizione e uso
media La proprietà accetta qualsiasi query di media valida come definito nel CSS.
Attenzione:Questa proprietà può accettare più valori.
Esempio
Un elemento <picture> che contiene due file di origine e un'immagine di riserva:
<picture> <source media="(min-width:650px)" srcset="flower-1.jpg"> <source media="(min-width:465px)" srcset="flower-2.jpg"> <img src="flower-3.jpg" alt="Flowers" style="width:auto;"> </picture>
Sintassi
<source media="media_query>
Operatori possibili
| Operatore | Descrizione |
|---|---|
| and | Definisce l'operatore AND. |
| not | Definisce l'operatore NOT. |
| , | Definisce l'operatore OR. |
Dispositivo
| Valore | Descrizione |
|---|---|
| all | Predefinito. Adatto a tutti i dispositivi. |
| aural | Sintetizzatore vocale. |
| braille | Dispositivo di feedback in braille. |
| handheld | Dispositivi portatili (schermo piccolo, banda larga limitata). |
| projection | Proiettore. |
| Anteprima di stampa/modulo di stampa. | |
| screen | Schermo del computer. |
| tty | Teletipo e mezzi simili che utilizzano una griglia di caratteri a larghezza fissa. |
| tv | Dispositivi di tipo TV (bassa risoluzione, capacità di paginazione limitata). |
Valore
| Valore | Descrizione |
|---|---|
| width |
Definisce la larghezza dell'area di visualizzazione target. Puoi usare i prefissi "min-" e "max-". Esempio: media="screen and (min-width:500px" |
| height |
Definisce l'altezza dell'area di visualizzazione target. Puoi usare i prefissi "min-" e "max-". Esempio: media="screen and (max-height:700px" |
| device-width |
Definisce la larghezza del display target/pagina. Puoi usare i prefissi "min-" e "max-". Esempio: media="screen and (device-width:500px" |
| device-height |
Definisce l'altezza del display target/pagina. Puoi usare i prefissi "min-" e "max-". Esempio: media="screen and (device-height:500px" |
| orientation |
Definisce la direzione del display target/pagina. Valori possibili: "portrait" o "landscape" Esempio: media="all and (orientation: landscape" |
| aspect-ratio |
Definisce il rapporto larghezza/altezza dell'area di visualizzazione target. Puoi usare i prefissi "min-" e "max-". Esempio: media="screen and (aspect-ratio:16/9" |
| device-aspect-ratio |
Definisce la rapporto device-width/device-height del display target/pagina. Puoi usare i prefissi "min-" e "max-". Esempio: media="screen and (aspect-ratio:16/9" |
| color |
Definisce il numero di bit per colore del display target. Puoi usare i prefissi "min-" e "max-". Esempio: media="screen and (color:3" |
| color-index |
Definisce il numero di colori che può gestire il display target. Puoi usare i prefissi "min-" e "max-". Esempio: media="screen and (min-color-index:256" |
| monochrome |
Definisce il numero di bit per pixel in un buffer a schermo monocromatico. Puoi usare i prefissi "min-" e "max-". Esempio: media="screen and (monochrome:2)" |
| resolution |
Definisce la densità di pixel del display/pagina target (dpi o dpcm). Puoi usare i prefissi "min-" e "max-". Esempio: media="print and (resolution:300dpi)" |
| scan |
Definisce il metodo di scansione del display TV. Valori possibili: "progressive" e "interlace". Esempio: media="tv and (scan:interlace)" |
| griglia |
Definisce se l'output del dispositivo è una griglia o un bitmap. Valori possibili: "1" rappresenta la griglia, "0" è altro. Esempio: media="handheld and (grid:1)" |
Supporto del browser
I numeri nella tabella indicano la versione del browser che supporta completamente l'attributo.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 38.0 | 9.0 | 15.0 | 9.1 | 25.0 |
