HTML <link> media Attribut
Exemple
Deux feuilles de style différentes pour deux types de médias (écran et impression) :
<head>
<link rel="stylesheet" type="text/css" href="theme.css">
<link rel="stylesheet" type="text/css" href="print.css" media="print">
</head> Définition et Utilisation
L'attribut media spécifie pour quel type de média ou appareil la ressource cible est optimisée.
Cet attribut est principalement utilisé avec des feuilles de style CSS pour définir différents styles selon les types de médias.
L'attribut media peut accepter plusieurs valeurs.
Support des Navigateurs
| Attribut | |||||
|---|---|---|---|---|---|
| media | Oui | Oui | Oui | Oui | Oui |
Syntaxe
<link 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. Utilisé pour tous les appareils de type média |
| Utilisé pour le mode d'aperçu avant impression/pages imprimées | |
| screen | Utilisé pour les écrans d'ordinateur, tablettes, smartphones, etc. |
| speech | Utilisé pour les lecteurs d'écran qui "lisent" la page à haute voix |
| aural | Obsolète. Synthétiseurs vocaux |
| braille | Obsolète. Dispositifs de retour d'information en braille |
| handheld | Obsolète. Appareils portables (petit écran, bande passante limitée) |
| projection | Obsolète. Projecteurs |
| tty | Obsolète. Teletype et médias similaires utilisant une grille de caractères à largeur fixe |
| tv | Obsolète. Appareils de type télévision (basse résolution, capacité de défilement limitée) |
Valeurs
| Valeur | Description |
|---|---|
| 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 (max-aspect-ratio:16/9)" |
| color | Spécifie le nombre de bits par couleur de l'affichage cible. Les préfixes "min-" et "max-" peuvent être utilisés. Exemple : media="screen and (min-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)" |
| device-aspect-ratio | Obsolète. Spécifie le rapport largeur/hauteur de l'appareil de l'affichage/papier cible. |
| device-width | Obsolète. Spécifie la largeur de l'affichage/papier cible. |
| device-height | Obsolète. Spécifie la hauteur de l'affichage/papier cible. |
| grid | Spécifie si le dispositif de sortie est en grille ou en bitmap. Les valeurs possibles sont "1" pour la grille, et "0" sinon. Exemple : media="handheld and (grid:1)" |
| 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)" |
| monochrome | Spécifie le nombre de bits par pixel dans un tampon d'affichage monochrome. Les préfixes "min-" et "max-" peuvent être utilisés. Exemple : media="screen and (min-monochrome:2)" |
| orientation | Spécifie l'orientation de l'affichage/papier cible. Valeurs possibles : "portrait" ou "paysage" Exemple : media="all and (orientation: landscape)" |
| 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 (min-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)" |
| 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)" |