Attributo media di <style> HTML

Tag HTML <style>

Definizione e uso

media Proprietà utilizzata per definire il media o dispositivo a cui lo stile CSS è rivolto (ottimizzato).

Questa proprietà viene utilizzata per definire lo stile applicabile a dispositivi specifici (ad esempio, iPhone), media vocali o di stampa.

Suggerimento:Questa proprietà può accettare più valori.

Esempio

Esempio 1

Stile definito per la stampa:

<style media="print">
h1 {color:#000000;}
p {color:#000000;}
body {background-color:#FFFFFF;}
</style>

Prova a farlo tu stesso

Esempio 2

Utilizzare la proprietà width del attributo media per distinguere tra due gruppi di stili:

<style media="screen AND (max-width:500px)" type="text/css">
a {
  background-color: grey;
  color: white;
  padding: 15px;
}
</style>
<style media="screen AND (min-width:500px)" type="text/css">
a {
  color: red;
  font-weight: 400;
}
</style>

Prova a farlo tu stesso

Nota:Quando la larghezza della finestra del browser è inferiore a 500 pixel, vengono utilizzati lo stile del primo gruppo, mentre quando è superiore a 500 pixel, vengono utilizzati lo stile del secondo gruppo.

Sintassi

<style media="value">

Operatore possibile

Operatore Descrizione
and Operatore di regola AND.
not Operatore di regola NOT.
, Operatore di regola OR.

Le condizioni di utilizzo dello stile possono essere progettate in modo molto dettagliato. Prima di tutto, è necessario chiarire il tipo di dispositivo di destinazione. La seguente tabella riassume tutti i valori conformi alle regole:

Dispositivo

Dispositivo Descrizione
all Predefinito. Applicabile a tutti i dispositivi.
aural Sintetizzatore vocale.
braille Dispositivi di feedback in braille.
handheld Dispositivi portatili (schermo piccolo, banda larga limitata).
projection Proiettore.
print Anteprima di stampa / pagina di stampa.
screen Schermo del computer.
tty Telexwriter e altri media con griglia di caratteri a spaziatura fissa.
tv Dispositivi di tipo televisivo (bassa risoluzione, capacità di scorrimento limitata).

Il browser è responsabile dell'interpretazione della classificazione degli dispositivi. Alcuni tipi di dispositivi (ad esempio, screen e print) hanno una interpretazione abbastanza coerente su vari browser, ma altri dispositivi (ad esempio, handheld) potrebbero avere una interpretazione più libera. Pertanto, verificare che l'interpretazione del browser per il dispositivo specifico sia la stessa di quella desiderata è molto necessario.

Caratteristiche

Caratteristiche Descrizione
width

Stabilisce la larghezza dell'area di visualizzazione target.

Puoi usare i prefissi "min-" e "max-".

Ad esempio: media="screen and (min-width:500px)"
height

Stabilisce l'altezza dell'area di visualizzazione target.

Puoi usare i prefissi "min-" e "max-".

Ad esempio: media="screen and (max-height:700px)"
device-width

Stabilisce la larghezza del display/target o del carta.

Puoi usare i prefissi "min-" e "max-".

Ad esempio: media="screen and (device-width:500px)"
device-height

Stabilisce l'altezza del display/target o del carta.

Puoi usare i prefissi "min-" e "max-".

Ad esempio: media="screen and (device-height:500px)"
orientation

Stabilisce la direzione del display/target o del carta.

I valori supportati sono portrait o landscape.

Questa proprietà non ha limitatori.

Ad esempio: media="all and (orientation: landscape)"
aspect-ratio

Stabilisce il rapporto larghezza/altezza dell'area di visualizzazione target.

Puoi usare i prefissi "min-" e "max-".

Ad esempio: media="screen and (aspect-ratio:16/9)"
device-aspect-ratio

Stabilisce il rapporto larghezza/altezza del dispositivo del display/target o del carta.

Puoi usare i prefissi "min-" e "max-".

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

Stabilisce il numero di bit per colore del display target.

Puoi usare i prefissi "min-" e "max-".

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

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

Puoi usare i prefissi "min-" e "max-".

Ad esempio: media="screen and (min-color-index:256)"
monochrome

Stabilisce il numero di bit per pixel nel buffer di frame monocromatico.

Puoi usare i prefissi "min-" e "max-".

Ad esempio: media="screen and (monochrome:2)"
resolution

Stabilisce la densità di pixel del display target o del carta (dpi o dpcm).

Puoi usare i prefissi "min-" e "max-".

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

Stabilisce il modello di scansione del televisore.

I valori supportati sono progressive e interlace.

Questa proprietà non ha limitatori.

Ad esempio: media="tv and (scan:interlace)"
griglia

Si specifica se l'output del dispositivo è a griglia o bitmap.

I dispositivi a griglia utilizzano una griglia fissa per visualizzare il contenuto, ad esempio terminali basati su caratteri e寻呼机 con visualizzazione a riga singola.

I valori supportati sono 0 e 1 (1 rappresenta dispositivi a griglia).

Questa proprietà non ha limitatori.

Ad esempio: media="handheld and (grid:1)"

Le proprietà come width sono spesso utilizzate con i limitatori min e max. Senza questi limitatori, l'uso dello stile può dipendere da dimensioni di finestra molto precise, ma l'aggiunta di limitatori rende le condizioni più flessibili.

La tabella sopra elenca e descrive le varie funzionalità disponibili. A meno che non sia specificato diversamente, queste funzionalità possono essere modificate con min- e max- per formare valori di soglia piuttosto che valori precisi.

Similmente a come accade per i dispositivi specificati, queste funzionalità sono interpretate dal browser. Le informazioni su quali funzionalità il browser riconosce e quando sono presenti e utilizzabili sono complesse. Se si desidera applicare stili basati su queste funzionalità, è necessario eseguire test completi e avere pronte alternative di stile in caso di inutilizzabilità delle funzionalità previste.

Supporto browser

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

Tag HTML <style>