HTML <link> mediaAttribut

Exemples

Deux feuilles de style différentes pour deux types de médias différents (écran d'ordinateur 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 indique sur quel appareil le document lié sera affiché.

Cet attribut est souvent utilisé avec les feuilles de style CSS pour spécifier différents styles pour différents types de médias.

L'attribut media accepte plusieurs valeurs.

Différences entre HTML 4.01 et HTML5

L'attribut media prend désormais en charge plus de valeurs.

Syntaxe

Opérateurs possibles

Valeur	Description
et	Spécifie un opérateur AND.
not	Spécifie un opérateur NOT.
,	Spécifie un opérateur OR.

Appareils

Valeur	Description
all	Par défaut. S'applique à tous les appareils.
aural	Synthétiseurs vocaux.
braille	Appareils de retour Braille.
handheld	Appareils mobiles (petits écrans, bande passante limitée).
projection	Projecteurs.
print	Mode d'aperçu avant impression / pages imprimées.
écran	Écrans d'ordinateur.
tty	Téléscripteurs et médias similaires utilisant une grille de caractères monospacée.
tv	Appareils de type télévision (faible résolution, capacité de défilement 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 (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 le 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 d'un écran 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 un bitmap. Valeurs possibles : "1" pour une grille, sinon "0". Exemple : media="handheld and (grid:1)"

Balise HTML <link> Autres extensions

HTMLBalise