HTML <source> media Attribut
Exemple
Un élément <picture> avec deux fichiers source et une image de secours :
<picture>
<source media="(min-width:650px)" srcset="img_pink_flowers.jpg">
<source media="(min-width:465px)" srcset="img_white_flower.jpg">
<img src="img_orange_flowers.jpg" alt="Fleurs" style="width:auto;">
</picture> Définition et Utilisation
L'attribut media accepte toute requête média valide qui serait normalement définie dans un CSS.
Remarque : Cet attribut peut accepter plusieurs valeurs.
Support des Navigateurs
Les chiffres dans le tableau spécifient la première version du navigateur qui prend entièrement en charge l'attribut.
| Attribut | |||||
|---|---|---|---|---|---|
| media | 38.0 | 9.0 | 15.0 | 9.1 | 25.0 |
Syntaxe
<source media=" media_query "> Opérateurs Possibles
| Valeur | Description |
|---|---|
| and | Spécifie un opérateur AND |
| not | Spécifie un opérateur NOT |
| , | Spécifie un opérateur OR |
Appareils
| Valeur | Description |
|---|---|
| all | Convient à tous les appareils. C'est par défaut |
| aural | Synthétiseurs vocaux |
| braille | Dispositifs de retour d'information en braille |
| handheld | Appareils portables (petit écran, bande passante limitée) |
| projection | Projecteurs |
| Mode d'aperçu avant impression/pages imprimées | |
| screen | Écrans d'ordinateur |
| tty | Teletype et médias similaires utilisant une grille de caractères à largeur fixe |
| tv | Appareils de type télévision (basse résolution, capacité de défilement limitée) |
Valeurs
| Valeur | Description |
|---|---|
| width | Spécifie la largeur de la zone d'affichage ciblée. Les préfixes "min-" et "max-" peuvent être utilisés. Exemple : media="screen and (min-width:500px)" |
| height | Spécifie la hauteur de la zone d'affichage ciblée. Les préfixes "min-" et "max-" peuvent être utilisés. Exemple : media="screen and (max-height:700px)" |
| device-width | Spécifie la largeur de l'affichage/papier cible. Les préfixes "min-" et "max-" peuvent être utilisés. Exemple : media="screen and (device-width:500px)" |
| device-height | Spécifie la hauteur de l'affichage/papier cible. Les préfixes "min-" et "max-" peuvent être utilisés. Exemple : media="screen and (device-height:500px)" |
| orientation | Spécifie l'orientation de l'affichage/papier cible. Valeurs possibles : "portrait" ou "paysage" Exemple : media="all and (orientation: landscape)" |
| aspect-ratio | Spécifie le rapport largeur/hauteur de la zone d'affichage ciblée. Les préfixes "min-" et "max-" peuvent être utilisés. Exemple : media="screen and (aspect-ratio:16/9)" |
| device-aspect-ratio | Spécifie le rapport device-width/device-height de l'affichage/papier cible. Les préfixes "min-" et "max-" peuvent être utilisés. Exemple : media="screen and (aspect-ratio:16/9)" |
| color | Spécifie les bits par couleur de l'affichage cible. Les préfixes "min-" et "max-" peuvent être utilisés. Exemple : media="screen and (color:3)" |
| color-index | Spécifie le nombre de couleurs que l'affichage cible peut gérer. Les préfixes "min-" et "max-" peuvent être utilisés. Exemple : media="screen and (min-color-index:256)" |
| monochrome | Spécifie les bits par pixel dans un tampon d'image monochrome. Les préfixes "min-" et "max-" peuvent être utilisés. Exemple : media="screen and (monochrome:2)" |
| resolution | Spécifie la densité de pixels (dpi ou dpcm) de l'affichage/papier cible. Les préfixes "min-" et "max-" peuvent être utilisés. Exemple : media="print and (resolution:300dpi)" |
| scan | Spécifie la méthode de numérisation d'un affichage TV. Les valeurs possibles sont "progressive" et "interlace". Exemple : media="tv and (scan:interlace)" |
| grid | Spécifie si le dispositif de sortie est une grille ou un bitmap. Les valeurs possibles sont "1" pour la grille, et "0" sinon. Exemple : media="handheld and (grid:1)" |