Media types
Un document peut utiliser plusieurs feuilles de style en fonction du medium d'affichage, écran ou imprimante par exemple.
link rel="stylesheet" type="text/css" media="screen" href="sans-serif.css"
link rel="stylesheet" type="text/css" media="print" href="serif.css"
On peut aussi déclarer dans le CSS les styles s'appliquant à un medium :
@media screen { * {font-family : serif} }
Media types reconnus
'all', ‘braille’, ‘embossed’,‘handheld’, ‘print’, ‘projection’, ‘screen’, 'speech', ‘tty’, ‘tv’
Syntaxe
Une media query réunit un type de medium et une ou plusieurs expressions servant à tester les particularités du medium.
Écran couleur : link rel="stylesheet" type="text/css" media="screen and (color)" href="serif.css"
@media (min-width:500px) { … }
@media (orientation: portrait) { … }
Attributs
| width | Largeur pour les media visuels et tactiles ; accepte les préfixes min- et max- |
| height | Hauteur pour les media visuels et tactiles ; accepte les préfixes min- et max- |
| orientation | PORTRAIT ou LANDSCAPE ; media bitmap |
| aspect-ration | rapport entre la largeur et la hauteur ; media bitmap ; accepte les préfixes min- et max- |
| color | nombre couleurs ; media visuels ; accepte les préfixes min- et max- ; exemple : (min-color : 1) |
| resolution | densité de pixels ; media bitmap ; accepte les préfixes min- et max- ; exemple : (min-resolution : 300dpi) |
Exemple
@media screen and (max-width : 500px) { p {font : normal 10pt sans-serif} }
@media screen and (min-width : 500px) { p {font : bold 24pt cursive} }
Utilisation avec <picture>
Cela permet d'adapter la taille de l'image au medium.
picture
source srcset="large.jpg" media="(min-width: 1200px)"
source srcset="petite.jpg" media="(max-width: 640px)"
img src="normale.jpg" alt="" /
/picture
Quand la fenêtre du navigateur est maximum, l'image large est affichée. En réduisant cette fenêtre, on passe à l'image normale et en continuant, on passe à l'image petite.
