Sites


CSS3

Les médias queries

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. 

Voici un exemple d'attachement de feuilles de style, ajouté dans la partie <header> du code HTML et indiquant l'emplacement de la feuille de style à utiliser pour l'affichage de la page selon le type de média.  Ainsi, une feuille de style spécifique pour l'affichage "écran" (screen) ou "papier", en vue de l'impression (print).
<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.

Media handheld 

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.

Principe

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 type de media (screen).
  • la requête (max-width:1024px), lui-même composé en deux sous élément : l'attribut (max-width) et la valeur (1024px).

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%.

Appliquer les media queries 

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.

Taille d'écran – Taille du navigateur 

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 

Différents écrans

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 

Enchaîner les requêtes

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.

Conclusion

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.