Attribut media de l'élément HTML <source>
Définition et utilisation
media La propriété accepte toute requête média valide généralement définie en CSS.
Attention :Cette propriété peut accepter plusieurs valeurs.
Exemple
Un élément <picture> contenant deux fichiers sources et une image de secours :
<picture> <source media="(min-width:650px)" srcset="flower-1.jpg"> <source media="(min-width:465px)" srcset="flower-2.jpg"> <img src="flower-3.jpg" alt="Flowers" style="width:auto;"> </picture>
Syntaxe
<source media="media_query>
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. Adapté à tous les appareils. |
| aural | Synthétiseur vocal. |
| braille | Appareil de retour d'information en braille. |
| handheld | Appareils portables (petite taille d'é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 médias utilisant une grille de caractères d'épaisseur constante. |
| 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 d'affichage cible. Préfixes "min-" et "max-" peuvent être utilisés. Exemple : media="screen and (min-width:500px" |
| height |
Définit la hauteur de la zone d'affichage cible. Préfixes "min-" et "max-" peuvent être utilisés. Exemple : media="screen and (max-height:700px" |
| device-width |
Définit la largeur du moniteur/papier cible. Préfixes "min-" et "max-" peuvent être utilisés. Exemple : media="screen and (device-width:500px" |
| device-height |
Définit la hauteur du moniteur/papier cible. Préfixes "min-" et "max-" peuvent être utilisés. Exemple : media="screen and (device-height:500px" |
| orientation |
Définit la direction du moniteur/papier cible. Valeurs possibles : "portrait" ou "landscape" Exemple : media="all and (orientation: landscape" |
| aspect-ratio |
Définit le rapport largeur/hauteur de la zone d'affichage cible. Préfixes "min-" et "max-" peuvent être utilisés. Exemple : media="screen and (aspect-ratio:16/9" |
| device-aspect-ratio |
Définit le rapport device-width/device-height du moniteur/papier cible. Préfixes "min-" et "max-" peuvent être utilisés. Exemple : media="screen and (aspect-ratio:16/9" |
| color |
Définit le nombre de bits pour chaque couleur du moniteur 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 le moniteur cible peut traiter. 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)" |
| resolution |
Définir la densité de pixels de l'écran cible/papier (dpi ou dpcm). Préfixes "min-" et "max-" peuvent être utilisés. Exemple : media="print and (resolution:300dpi)" |
| scan |
Définir la méthode de balayage de l'écran TV. Les valeurs possibles sont : "progressive" et "interlace". Exemple : media="tv and (scan:interlace)" |
| grid |
Définir si l'appareil de sortie est un réseau ou une bitmap. Les valeurs possibles sont : "1" pour le réseau, "0" pour d'autres. Exemple : media="handheld and (grid:1)" |
Support du navigateur
Les numéros dans le tableau indiquent la version du navigateur qui prend en charge cette propriété pour la première fois.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 38.0 | 9.0 | 15.0 | 9.1 | 25.0 |
