HTML <style> mediaAttribut
Exemples
Deux feuilles de style différentes pour deux types de médias différents (écran et impression) :
Essayez-le vous-même »
Prise en charge des navigateurs
Tous les principaux navigateurs prennent en charge l'attribut media.
Définition et utilisation
L'attribut media spécifie pour quel média/périphérique la ressource actuelle est optimisée.
Cet attribut est principalement utilisé dans les feuilles de style CSS pour spécifier différents styles pour différents types de médias.
Astuce :Cet attribut peut accepter plusieurs valeurs.
Différences entre HTML 4.01 et HTML5
Aucun.
Syntaxe
Opérateurs possibles
| Valeur | Description |
|---|---|
| et | Spécifie l'opérateur AND. |
| not | Spécifie l'opérateur NOT. |
| , | Spécifie l'opérateur OR. |
Appareils
| Valeur | Description |
|---|---|
| all | Par défaut. S'applique à tous les appareils. |
| aural | Synthétiseurs vocaux. |
| braille | Appareils de retour braille pour les aveugles. |
| handheld | Appareils mobiles (petits écrans, bande passante limitée). |
| projection | Projecteurs. |
| Mode d'aperçu avant impression / pages imprimées. | |
| écran | Écran d'ordinateur (par défaut). |
| tty | Téléscripteurs et médias similaires utilisant une grille de caractères à largeur fixe. |
| tv | Appareils de type TV (basse résolution, capacité de défilement d'écran limitée). |
Valeur
| Valeur | Description |
|---|---|
| width |
Spécifie la largeur de la zone d'affichage cible. 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 cible. 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/du 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/du 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/du papier cible. Valeurs possibles : "portrait" ou "landscape" Exemple : media="all and (orientation: landscape)" |
| aspect-ratio |
Spécifie 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)" |
| device-aspect-ratio |
Spécifie le rapport device-width/device-height de l'affichage/du papier cible. Les préfixes "min-" et "max-" peuvent être utilisés. Exemple : media="screen and (device-aspect-ratio:16/9)" |
| color |
Spécifie les bits/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/pixel dans un tampon de trame monochrome. Les préfixes "min-" et "max-" peuvent être utilisés. Exemple : media="screen and (monochrome:2)" |
| résolution |
Spécifie la densité de pixels (dpi ou dpcm) de l'écran ou du 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 balayage des écrans de télévision. Valeurs possibles : "progressive" et "interlace". Exemple : media="tv and (scan:interlace)" |
| grid |
Spécifie si le périphérique de sortie est une grille ou une bitmap. Valeurs possibles : "1" pour une grille, sinon "0". Exemple : media="handheld and (grid:1)" |
Balise HTML <style> Autres extensions