Exemple
Deux feuilles de style différentes pour deux différents 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>
Essayez - le vous - même » Définition et utilisation
Le media attribut spécifie ce que les médias / dispositif de la ressource cible est optimisée pour.
Cet attribut est le plus souvent utilisé avec des feuilles de style CSS pour spécifier différents styles pour différents types de médias.
Le media attribut peut accepter plusieurs valeurs.
support du navigateur
| Attribut | |||||
|---|---|---|---|---|---|
| media | Oui | Oui | Oui | Oui | Oui |
Différences entre HTML 4.01 et HTML5
Le media attribut prend désormais en charge plusieurs valeurs.
Syntaxe
<link media="value">
possibles Operators
| Valeur | La description |
|---|---|
| and | Indique un opérateur AND |
| not | Indique un opérateur NOT |
| , | Indique un opérateur OU |
Dispositifs
| Valeur | La description |
|---|---|
| all | Défaut. Convient pour tous les appareils |
| aural | synthétiseurs de la parole |
| braille | dispositifs de retour en braille |
| handheld | Appareils de poche (petit écran, une bande passante limitée) |
| projection | Projecteurs |
| Aperçu avant impression Mode / pages imprimées | |
| screen | Les écrans d'ordinateur |
| tty | Télétypes et des médias similaires en utilisant une grille de caractères à espacement fixe |
| tv | dispositifs de type télévision (basse résolution, la capacité de défilement limitée) |
Valeurs
| Valeur | La description |
|---|---|
| width | Indique la largeur de la zone d'affichage ciblé. "min-" et "max-" préfixes peuvent être utilisés. Exemple: les media="screen and (min-width:500px)" |
| height | Indique la hauteur de la zone d'affichage ciblé. "min-" et "max-" préfixes peuvent être utilisés. Exemple: les media="screen and (max-height:700px)" |
| device-width | Indique la largeur de la cible d'affichage / papier. "min-" et "max-" préfixes peuvent être utilisés. Exemple: les media="screen and (device-width:500px)" |
| device-height | Indique la hauteur de la cible d'affichage / papier. "min-" et "max-" préfixes peuvent être utilisés. Exemple: les media="screen and (device-height:500px)" |
| orientation | Indique l'orientation de la cible d'affichage / papier. Valeurs possibles: "portrait" ou "landscape" Exemple: media="all and (orientation: landscape)" |
| aspect-ratio | Indique le rapport largeur / hauteur de la zone d'affichage ciblé. "min-" et "max-" préfixes peuvent être utilisés. Exemple: media="screen and (aspect-ratio:16/9)" |
| device-aspect-ratio | Indique le rapport dispositif largeur / device-hauteur de la cible d'affichage / papier. "min-" et "max-" préfixes peuvent être utilisés. Exemple: media="screen and (aspect-ratio:16/9)" |
| color | Indique les bits par couleur d'affichage cible. "min-" et "max-" préfixes peuvent être utilisés. Exemple: les media="screen and (color:3)" |
| color-index | Indique le nombre de couleurs de l'affichage cible peut gérer. "min-" et "max-" préfixes peuvent être utilisés. Exemple: media="screen and (min-color-index:256)" |
| monochrome | Indique les bits par pixel dans une mémoire tampon de trame monochrome. "min-" et "max-" préfixes peuvent être utilisés. Exemple: les media="screen and (monochrome:2)" |
| resolution | Indique la densité de pixels (ppp ou dpcm) de la cible d'affichage / papier. "min-" et "max-" préfixes peuvent être utilisés. Exemple: media="print and (resolution:300dpi)" |
| scan | Indique la méthode d'un écran de télévision à balayage. Les valeurs possibles sont "progressive" et "interlace" . Exemple: media="tv and (scan:interlace)" |
| grid | Indique si le périphérique de sortie est grille ou bitmap. Les valeurs possibles sont "1" de la grille, et "0" autrement. Exemple: media="handheld and (grid:1)" de media="handheld and (grid:1)" |