Attribut media du lien HTML
Définition et utilisation
media Cette propriété détermine pour quels média ou appareils le contenu du fichier cible est optimisé.
media Cette propriété spécifie sur quel appareil le document lié sera affiché.
Cette propriété est principalement utilisée avec les feuilles de style CSS pour spécifier des styles différents pour différents types de média.
media Les propriétés peuvent accepter plusieurs valeurs.
Exemple
Deux styles CSS différents pour deux types de média 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>
Syntaxe
<link media="value>
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
| Appareil | Description |
|---|---|
| all | Par défaut. Utilisé pour tous les types d'appareils de médias. |
| Utilisé pour l'aperçu avant impression et les pages d'impression. | |
| screen | Utilisé pour les écrans d'ordinateurs, les tablettes, les smartphones, etc. |
| speech | Lecteurs d'écran utilisés pour lire les pages. |
| aural | Obsolète.Synthétiseurs vocaux. |
| braille | Obsolète.Appareils de retour d'information en braille. |
| handheld | Obsolète.Appareils portables (écran de petite taille, bande passante limitée). |
| projection | Obsolète.Projecteurs. |
| tty | Obsolète.Téléimprimeurs et autres médias similaires utilisant un réseau de caractères à espacement fixe. |
| tv | Obsolète.Appareils de type télévision (résolution faible, capacité de défilement limitée). |
Valeur
| Valeur | Description |
|---|---|
| aspect-ratio |
Définit le rapport largeur/hauteur de la zone d'affichage cible. Les 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 de l'écran cible. Les 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. Les préfixes "min-" et "max-" peuvent être utilisés. Exemple : media="screen and (min-color-index:256)" |
| device-aspect-ratio | Obsolète.Définit le rapport device-width/device-height de l'écran ou du papier cible. |
| device-width | Obsolète.Définit la largeur de l'écran ou du papier cible. |
| device-height | Obsolète.Définit la hauteur de l'écran ou du papier cible. |
| grid |
Définit si l'appareil de sortie est un réseau ou un bitmap. Valeurs possibles : "1" représente le réseau, "0" est autre. Exemple : media="handheld and (grid:1)" |
| height |
Définit la hauteur de la zone d'affichage cible. Les préfixes "min-" et "max-" peuvent être utilisés. Exemple : media="screen and (max-height:700px)" |
| monochrome |
Définit les bits par pixel dans le tampon de frame monochrome. Les préfixes "min-" et "max-" peuvent être utilisés. Exemple : media="screen and (monochrome:2)" |
| Orientation |
Définir la direction de l'écran cible/papier. Les valeurs possibles sont : "portrait" ou "landscape". Exemple : media="all and (orientation: landscape)" |
| Résolution |
Définir la densité des pixels de l'écran cible/papier (dpi ou dpcm). Les 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. Les valeurs possibles sont : "progressive" et "interlace". Exemple : media="tv and (scan:interlace)" |
| Largeur |
Définir la largeur de la zone de visualisation cible. Les préfixes "min-" et "max-" peuvent être utilisés. Exemple : media="screen and (min-width:500px)" |
Support du navigateur
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| Support | Support | Support | Support | Support |
