Manuale di riferimento HTML

Completo delle etichette HTML

Attributo media del tag source HTML

L'attributo media del tag source accetta qualsiasi query di media valida definita di solito nel CSS, l'attributo media può accettare più valori.

　HTML <source> etichetta

Esempio online

Un elemento <picture> con due file di origine e un'immagine di riserva:

Esempio

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Utilizzo dell'attributo source media in HTML - Guida di base (oldtoolbag.com)</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<picture>
　　<source media="(min-width: 650px)" srcset="img_pink_flowers.jpg">
　　<source media="(min-width: 465px)" srcset="img_white_flower.jpg">
　　<img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>
<p>Modifica la dimensione del browser per vedere le diverse versioni delle immagini caricate in diverse dimensioni di viewport. Il browser troverà il primo elemento source che corrisponde alla query di media con la larghezza del viewport corrente dell'utente e otterrà l'immagine specificata nell'attributo srcset.</p>
<p>Il tag img è l'ultimo figlio del blocco dichiarativo delle immagini. Il tag img viene utilizzato per fornire compatibilità retroattiva per i browser che non supportano l'elemento picture o non hanno un tag sorgente corrispondente.
</p>
</body>
</html>

Testa per vedere ‹/›

Compatibilità del browser

IEFirefoxOperaChromeSafari

Tutti i browser mainstream supportano l'attributo media. Attenzione: IE12 e versioni precedenti o Safari 9.0 e versioni precedenti non supportano l'elemento picture

Definizione e uso

L'attributo media accetta qualsiasi query di media valida come definito nel CSS.

Attenzione:L'attributo accetta più valori.

Differenze tra HTML 4.01 e HTML5

Il tag <source> è una nuova etichetta HTML5.

Sintassi

<source media="value>

Operatori possibili

Valore	Descrizione
and	Specificare un operatore AND
not	Specificare un operatore NOT
,	Specificare un operatore OR

Dispositivo

Valore	Descrizione
all	Predefinito. Applicabile a tutti i dispositivi
aural	Sintetizzatore vocale
braille	Dispositivo di feedback in braille
handheld	Dispositivo portatile (schermo piccolo, banda larga limitata)
projection	Proiettore
print	Modo di anteprima di stampa/modulo di stampa
screen	Schermo del computer
tty	Teletipo e altri media che utilizzano una griglia di caratteri a larghezza fissa
tv	Dispositivo di tipo TV (bassa risoluzione, capacità di scorrimento limitata)

Valore

Valore	Descrizione
width	Specificare la larghezza dell'area di visualizzazione del display target Puoi usare i prefissi "min-" e "max-". Esempio: media="screen and (min-width:500px)"
height	Specificare l'altezza dell'area di visualizzazione del display target Puoi usare i prefissi "min-" e "max-". Esempio: media="screen and (max-height:700px)"
device-width	Specificare la larghezza del display target/pagina cartacea Puoi usare i prefissi "min-" e "max-". Esempio: media="screen and (device-width:500px)"
device-height	Specificare l'altezza del display target/pagina cartacea Puoi usare i prefissi "min-" e "max-". Esempio: media="screen and (device-height:500px)"
orientation	Specificare la direzione del display target/pagina cartacea Valori possibili: "portrait" o "landscape" Esempio: media="all and (orientation: landscape)"
aspect-ratio	Specificare il rapporto larghezza/altezza dell'area di visualizzazione del display target Puoi usare i prefissi "min-" e "max-". Esempio: media="screen and (aspect-ratio:16/9)"
device-aspect-ratio	Specificare il rapporto device-width/device-height del display target/pagina cartacea Puoi usare i prefissi "min-" e "max-". Esempio: media="screen and (aspect-ratio:16/9)"
color	Specificare i bits/color del display target Puoi usare i prefissi "min-" e "max-". Esempio: media="screen and (color:3)"
color-index	Specificare il numero di colori che il display target può gestire. Puoi usare i prefissi "min-" e "max-". Esempio: media="screen and (min-color-index:256)"
monochrome	Specificare i bits/pixel del buffer a colori monocromatico. Puoi usare i prefissi "min-" e "max-". Esempio: media="screen and (monochrome:2)"
resolution	Specificare 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	Specificare il metodo di scansione del display TV. Valori possibili: "progressive" e "interlace". Esempio: media="tv and (scan:interlace)"
griglia	Specificare se l'output dispositivo è una griglia o bitmap. Valori possibili: "1" per griglia, altrimenti "0". Esempio: media="handheld and (grid:1)"

　HTML <source> etichetta

HTML: <template> etichetta