Attribut média HTML


Définition et utilisation

L' mediaattribut spécifie pour quel support/appareil le document lié est optimisé.

Cet attribut est utilisé pour spécifier que l'URL cible est conçue pour des appareils spéciaux (comme l'iPhone), la parole ou les médias imprimés.

Cet attribut peut accepter plusieurs valeurs.


S'applique à

L' mediaattribut peut être utilisé sur les éléments suivants :

Éléments Attribut
<a> médias
<zone> médias
<lien> médias
<source> médias
<style> médias

Exemples

Un exemple

Un lien avec un attribut media :

<a href="att_a_media.asp?output=print"
media="print and (resolution:300dpi)">
Open media attribute page for print.</a>

Exemple de zone

Une image cliquable, avec une zone cliquable :

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" alt="Sun"
href="sun.htm" media="screen and (min-color-index:256)">
</map>

Exemple de lien

Deux feuilles de style différentes pour deux types de médias différents (écran et impression) :

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

Exemple de sources

Utilisation de l'attribut media :

<source src="movie.ogg" type="video/ogg"
media="screen and (min-width:320px)">

Exemple de style

Spécifiez le style à utiliser pour l'impression :

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

</style>

Prise en charge du navigateur

L' mediaattribut est compatible avec les navigateurs suivants pour chaque élément :

Element
a Yes Yes Yes Yes Yes
area Yes Yes Yes Yes Yes
link Yes Yes Yes Yes Yes
source Not supported Not supported Not supported Not supported Not supported
style Yes Yes Yes Yes Yes