Attribut media de l'élément <area> en HTML
Définition et utilisation
media
L'attribut spécifie pour quels médias ou appareils le document lié a été optimisé.
Cette propriété est utilisée pour définir si l'URL cible est conçue pour des appareils spéciaux (comme iPhone), des médias vocaux ou des médias imprimés.
Cette propriété peut accepter plusieurs valeurs.
Seulement lorsque Attribut href lors de l'utilisation.
Attention :Cet attribut est purement suggératif.
Exemple
Utilisez l'attribut media pour spécifier le média ou l'appareil cible de l'URL cible optimisé :
<map name="planetmap" <area shape="rect" coords="0,0,114,576" alt="Sun" href="sun.html" media="screen and (min-color-index:256)" </map>
Syntaxe
<area media="valeur>
Opérateurs possibles
Opérateurs | Description |
---|---|
and | Définit l'opérateur AND. |
not | Définit l'opérateur NOT. |
, | Définit l'opérateur OR. |
Appareil
Valeur | Description |
---|---|
all | Par défaut. Convient à tous les appareils. |
aural | Synthétiseur vocal. |
braille | Appareil de feedback en braille. |
handheld | Appareils portables (petit écran, bande passante limitée). |
projection | Projecteur. |
Mode aperçu avant impression/page d'impression. | |
screen | Écran d'ordinateur. |
tty | Téléimprimeur et autres supports utilisant une grille de caractères d'épaisseur uniforme. |
tv | Appareils de type télévision (faible résolution, capacité de pagination limitée). |
Valeur
Valeur | Description |
---|---|
width |
Définit la largeur de la zone cible d'affichage. Préfixes "min-" et "max-" peuvent être utilisés. Exemple : media="screen and (min-width:500px" |
height |
Définit la hauteur de la zone cible d'affichage. Préfixes "min-" et "max-" peuvent être utilisés. Exemple : media="screen and (max-height:700px" |
device-width |
Définit la largeur de l'écran cible/papier. Préfixes "min-" et "max-" peuvent être utilisés. Exemple : media="screen and (device-width:500px" |
device-height |
Définit la hauteur de l'écran cible/papier. Préfixes "min-" et "max-" peuvent être utilisés. Exemple : media="screen and (device-height:500px" |
orientation |
Définit la direction de l'écran cible/papier. Valeurs possibles : "portrait" ou "landscape" Exemple : media="all and (orientation: landscape" |
aspect-ratio |
Définit le ratio largeur/hauteur de la zone cible d'affichage. Préfixes "min-" et "max-" peuvent être utilisés. Exemple : media="screen and (aspect-ratio:16/9" |
device-aspect-ratio |
Définit le ratio device-width/device-height pour l'écran cible/papier. Préfixes "min-" et "max-" peuvent être utilisés. Exemple : media="screen and (aspect-ratio:16/9" |
color |
Définit le nombre de bits par couleur pour l'écran cible. Préfixes "min-" et "max-" peuvent être utilisés. Exemple : media="screen and (color:3" |
color-index |
Définit le nombre de couleurs que peut gérer l'écran cible. Préfixes "min-" et "max-" peuvent être utilisés. Exemple : media="screen and (min-color-index:256" |
Monochrome |
Définir le nombre de bits par pixel dans le tampon de couleur monochrome. Préfixes "min-" et "max-" peuvent être utilisés. Exemple : media="screen and (monochrome:2)" |
Résolution |
Définir la densité en pixels de l'écran cible/papier (dpi ou dpcm). Préfixes "min-" et "max-" peuvent être utilisés. Exemple : media="print and (resolution:300dpi)" |
Balayage |
Définir la méthode de balayage de l'écran TV. Valeurs possibles : "progressive" et "interlace". Exemple : media="tv and (scan:interlace)" |
Grille |
Définir l'appareil de sortie en grille ou en bitmap. Valeurs possibles : "1" représente la grille, "0" est autre. Exemple : media="handheld and (grid:1)" |
Support du navigateur
Chrome | Edge | Firefox | Safari | Opera |
---|---|---|---|---|
Chrome | Edge | Firefox | Safari | Opera |
Support | Support | Support | Support | Support |