Les différents types de media sont :
all, braille, embossed, handheld, print, projection, screen, speech, tty, tv
Lorsqu'une feuille de style est destinée à être utilisée quelque soit le type de média, on utilise l'attribut média "all". Dès lors qu'on souhaite appliquer une feuille de style spécifique pour l'affichage de la page sur un type de média, il faudra l'indiquer aux navigateurs sous forme de liens.
<link rel="stylesheet" href="global.css" media="all" />
<link rel="stylesheet" href="main.css" media="screen" />
<link rel="stylesheet" href="paper.css" media="print" />
<link rel="stylesheet" href="tiny.css" media="handheld" />Pour inclure un media, il faut le spécifier dans la définition des css :
@media screen {
body {
font-size:100%;
}
}
@media print {
body {
font-size:15pt;
}
}Le principe est que le navigateur s'identifie comme un des médias et utilise le contenu du css qui le concerne.
Celui-ci devrait concerner les petits écrans. Mais de nombreux navigateurs de ce type d'appareil ignorent le media handheld. Aujourd'hui, deux smartphones n'ont pas forcément des résolutions et des tailles d'écran égales. Cela a donc peu de sens de les utiliser finalement.
La nouvelle réponse du W3C avec le CSS3 sur la question de la portabilité du web sont les medias queries. Ils permettent d'identifier les caractéristiques des différentes appareils et navigateurs.
Exemple :
@media screen and (max-width: 1024px) {
body {font-size: 100%;}
}
Chaque media queri est composé de :
Le navigateur lisant cette valeur s'identifie ou non comme appartenant au type de media et si c'est le cas, s'identifie comme répondant à la valeur ou non. Si les deux éléments sont vérifiés, alors le style demandé sera pris en compte.
Ici, si la page s'affiche sur un écran et que la largeur d'affichage ne dépasse pas 1024 pixels, alors, la taille de la police sera de 100%.
Il est possible d'attacher cette déclaration dans une feuille de style à part et d'inclure dans la page html la requête :
<link rel="stylesheet" href="wide.css" media="screen and (min-width:1024px)" />
Ou de l'attacher au moyen d'une déclaration de type @import
@import url("wide.css") screen and (min-width:1024px);
L'avantage de l'@import est de garder le code dans un fichier et de réduire le nombre de requête envoyées au serveur.
Attention à ne pas confondre la taille de l'écran et la taille du navigateur. Il est fort possible que le navigateur n'utilise pas tout l'écran.
Largeur de la zone d'affichage :
Width
Largeur de la surface de rendu de l'appareil :
Device-width
Hauteur de la surface de rendu de l'appareil :
Device-height
Rapport entre la largeur et la hauteur de la zone d'affichage :
device-aspect-ratio
Rapport entre la largeur et la hauteur de la zone d'affichage :
aspect-ratio
Il existe des liseuses en noir et blanc. Il peut être judicieux de leur offrir une feuille de style css spécifique. Il faudra alors utiliser la propriété :
color
Exemple :
color:8;
Un appareil sans couleur renvoi la valeur 0.
@media screen and (min-color-index:256)
La propriété resolution permet d'identifier également la résolution de l'écran d'affichage :
resolution
On peut enchaîner plusieurs requêtes avec l'opérateur and. Nous permettant ainsi de tester plusieurs caractéristiques en une seule requête, et donc de créer des tests plus complexes pour les appareils.
@media screen and (min-device-width: 480px) and (orientation:landscape) {}
Attention Tous les navigateurs compatibles avec @media ne supportent pas toutes les caractéristiques de la spécification.
Ainsi on peut utiliser max-width et min-width ou toute autre propriété testable en media queries pour charger conditionnellement la feuille de style CSS ou la suite de règles appropriées. Et cela permet à tous les navigateurs compatibles de profiter des medias queries.
Il y a une erreur de communication avec le serveur Booktype. Nous ne savons pas actuellement où est le problème.
Vous devriez rafraîchir la page.