Proprietà media <link> HTML

Tag HTML <link>

Definizione e uso

media L'attributo determina per quale tipo di media/dispositivo è ottimizzato il risorsa di destinazione.

media L'attributo specifica su quale dispositivo il documento collegato verrà visualizzato.

Questa proprietà viene principalmente utilizzata insieme a tavole di stile CSS per specificare stili diversi per diversi tipi di media.

media L'attributo può accettare più valori.

Esempio

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

<head>
  <link rel="stylesheet" type="text/css" href="theme.css">
  <link rel="stylesheet" type="text/css" href="print.css" media="print">
</head>

Prova personalmente

Sintassi

<link media="value>

Operatori possibili

Operatore Descrizione
and Stabilisce l'operatore AND.
not Stabilisce l'operatore NOT.
, Stabilisce l'operatore OR.

Dispositivo

Dispositivo Descrizione
all Predefinito. Utilizzato per tutti i tipi di dispositivi di media.
print Utilizzati per la previsualizzazione di stampa o le pagine di stampa.
screen Utilizzati per computer, tablet, smartphone e altri.
speech Utilizzati per lettori di schermo per la lettura delle pagine.
aural Disattivato.Sintetizzatori vocali.
braille Disattivato.Dispositivi di feedback in braille.
handheld Disattivato.Dispositivi portatili (schermo piccolo, banda larga limitata).
projection Disattivato.Proiettore.
tty Disattivato.Utilizzati per telex e media simili con griglia a spaziatura fissa.
tv Disattivato.Dispositivi di tipo TV (risoluzione bassa, capacità di scorrimento limitata).

Valore

Valore Descrizione
aspect-ratio

Stabilisce il rapporto larghezza/altezza dell'area di visualizzazione del dispositivo di destinazione.

E' possibile utilizzare i prefissi "min-" e "max-".

Esempio: media="screen and (aspect-ratio:16/9)"
color

Stabilisce il numero di bit per colore del display di destinazione.

E' possibile utilizzare i prefissi "min-" e "max-".

Esempio: media="screen and (color:3)"
color-index

Stabilisce il numero di colori che il display di destinazione può gestire.

E' possibile utilizzare i prefissi "min-" e "max-".

Esempio: media="screen and (min-color-index:256)"
device-aspect-ratio Disattivato.Stabilisce il rapporto device-width/device-height del display/ carta di destinazione.
device-width Disattivato.Stabilisce la larghezza del display/ carta di destinazione.
device-height Disattivato.Stabilisce l'altezza del display/ carta di destinazione.
grid

Stabilisce se l'unità di output è una griglia o un bitmap.

Valori possibili: "1" rappresenta la griglia, "0" è altri.

Esempio: media="handheld and (grid:1)"
height

Stabilisce l'altezza dell'area di visualizzazione del dispositivo di destinazione.

E' possibile utilizzare i prefissi "min-" e "max-".

Esempio: media="screen and (max-height:700px)"
monochrome

Stabilisce ogni bit per pixel nel buffer di frame monocromatico.

E' possibile utilizzare i prefissi "min-" e "max-".

Esempio: media="screen and (monochrome:2)"
orientamento

Regola la direzione del display/pagina target.

I valori possibili sono: "portrait" o "landscape".

Esempio: media="all and (orientation: landscape)"
risoluzione

Regola la densità dei pixel del display/pagina target (dpi o dpcm).

E' possibile utilizzare i prefissi "min-" e "max-".

Esempio: media="print and (resolution:300dpi)"
scan

Regola il metodo di scansione del display TV.

I valori possibili sono: "progressive" e "interlace".

Esempio: media="tv and (scan:interlace)"
larghezza

Regola la larghezza dell'area di visualizzazione del target.

E' possibile utilizzare i prefissi "min-" e "max-".

Esempio: media="screen and (min-width:500px)"

Supporto browser

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Supporto Supporto Supporto Supporto Supporto

Tag HTML <link>