HTML <style> media Attribut
Exemple
Spécifiez le style à utiliser pour l'impression :
<style media="print">
h1 {color:#000000;}
p {color:#000000;}
body {background-color:#FFFFFF;}
</style> Définition et utilisation
L'attribut media spécifie pour quel média ou appareil le style CSS est optimisé.
Cet attribut est utilisé pour indiquer que le style est destiné à des appareils spécifiques (comme l'iPhone), à la synthèse vocale ou aux médias imprimés.
Astuce : Cet attribut peut accepter plusieurs valeurs.
Support des navigateurs
| Attribut | |||||
|---|---|---|---|---|---|
| media | Oui | Oui | Oui | Oui | Oui |
Syntaxe
<style media=" value "> Opérateurs possibles
| Valeur | Description |
|---|---|
| and | Spécifie un opérateur ET |
| not | Spécifie un opérateur NON |
| , | Spécifie un opérateur OU |
Appareils
| Valeur | Description |
|---|---|
| all | Par défaut. Convient à tous les appareils |
| 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 "progressif" et "entrelaçage". 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)" |