Manuale di riferimento HTML

Completo elenco dei tag HTML

Attributo 'link media' in HTML

L'attributo 'link media' specifica per quale tipo di media o dispositivo il risorsa target è ottimizzato, questo attributo viene spesso utilizzato insieme a tabelle di stili CSS per specificare stili diversi per diversi tipi di media.

　HTML <link> etichetta

Esempio online

Due tabelle di stili diverse per due tipi di media diversi (schermo e stampa):

Esempio

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Utilizzo dell'attributo 'link' hreflang in HTML - Tutorial di base (oldtoolbag.com)</title>
<link rel="stylesheet" type="text/css" href="demo_screen.css">
<link rel="stylesheet" type="text/css" href="demo_print.css" media="print">
</head>
<body>
<h1>oldtoolbag.com Esempio</h1>
<p><a href="tryhtml_link_media.html" target="_blank">Clicca qui</a> per aprire questa pagina in una nuova finestra (senza parte tryit).</p>
<p>Se stampi questa pagina o l'apri nella vista di anteprima di stampa, vedrai che utilizza lo stile di tabella 'media="print"'. Lo stile 'Stampa' contiene testo nero su sfondo bianco.</p>
</body>
</html>

Prova a vedere ‹/›

Compatibilità del browser

IEFirefoxOperaChromeSafari

Tutti i browser mainstream supportano l'attributo 'media'.

Definizione e uso

L'attributo 'media' specifica per quale tipo di media o dispositivo il risorsa target è ottimizzato.

Questa proprietà viene solitamente utilizzata insieme a una tabella di stili CSS per specificare stili diversi per diversi tipi di media.

L'attributo media può accettare più valori.

Differenze tra HTML 4.01 e HTML5

L'attributo media ora supporta più valori.

Sintassi

<link media="value>

Operatori possibili

Valore	Descrizione
and	Stabilisce un operatore AND.
not	Stabilisce un operatore NOT.
,	Stabilisce un operatore OR.

Dispositivo

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

Valore

Valore	Descrizione
width	Stabilisce la larghezza dell'area di visualizzazione del display target. Possono essere usati prefissi "min-" e "max-". Esempio: media="screen and (min-width:500px)"
height	Stabilisce l'altezza dell'area di visualizzazione del display target. Possono essere usati prefissi "min-" e "max-". Esempio: media="screen and (max-height:700px)"
device-width	Stabilisce la larghezza del display target/pagina. Possono essere usati prefissi "min-" e "max-". Esempio: media="screen and (device-width:500px)"
device-height	Stabilisce l'altezza del display target/pagina. Possono essere usati prefissi "min-" e "max-". Esempio: media="screen and (device-height:500px)"
orientation	Stabilisce la direzione del display target/pagina. Valori possibili: "portrait" o "landscape". Esempio: media="all and (orientation: landscape)"
aspect-ratio	Stabilisce il rapporto larghezza/altezza dell'area di visualizzazione del display target. Possono essere usati prefissi "min-" e "max-". Esempio: media="screen and (aspect-ratio:16/9)"
device-aspect-ratio	Stabilisce il rapporto device-width/device-height del display target/pagina. Possono essere usati prefissi "min-" e "max-". Esempio: media="screen and (aspect-ratio:16/9)"
color	Stabilisce i bits/color del display target. Possono essere usati prefissi "min-" e "max-". Esempio: media="screen and (color:3)"
color-index	Determina il numero di colori che il display target può gestire. Possono essere usati prefissi "min-" e "max-". Esempio: media="screen and (min-color-index:256)"
monochrome	Determina i bits/pixel del buffer di frame monocromatico. Possono essere usati prefissi "min-" e "max-". Esempio: media="screen and (monochrome:2)"
resolution	Determina la densità di pixel del display/pagina target (dpi o dpcm). Possono essere usati prefissi "min-" e "max-". Esempio: media="print and (resolution:300dpi)"
scan	Determina il metodo di scansione del display TV. Valori possibili: "progressive" e "interlace". Esempio: media="tv and (scan:interlace)"
griglia	Determina se l'output dispositivo è una griglia o bitmap. Valori possibili: "1" per griglia, altrimenti "0". Esempio: media="handheld and (grid:1)"

　HTML <link> etichetta

HTML: <template> etichetta