Découverte des Média Queries

Media-queries ou comment adapter son affichage

Le principe du RWD s’appuie sur diverses feuilles de styles CSS qui vont, en fonction des contextes, présenter un affichage alternatif. Nous parlons généralement de trois propositions d’affichage, pour les trois principales cibles de support, écrans, tablettes et mobiles. Ceci étant, une distinction entre écran 16/(9, 10) et 4/3 peut également être définie. Ce qui porterait le nombre de propositions d’affichage de base, à quatre. Vous pouvez avoir un aperçu sur le site mediaqueri.es.

Pour mettre en place une telle fonctionnalité, il n’est pas nécessaire d’entrer dans des solutions serveurs complexes, il suffit simplement de filtrer au niveau de la liaison avec la feuille de style, pour définir le cadre dans lequel celle-ci doit être employée :

<link type="text/css" href="style.css" rel=stylesheet media="handheld" >

Le media type handheld permet de ne prendre en compte que les appareils mobiles. Par contre, ce paramètre seul est très vague. Jusqu’à présent rien ne permettait de faire la distinction par exemple, entre un nokia 6600 et un iPhone, même ancien. En effet, tous les deux répondent bien au critère de type handheld, mais on comprend bien que les deux n’ont pas les mêmes capacités d’affichage.

En ce sens, le w3c a produit la recommandation sur les media queries complémentaires à la précédente, qui ne portait que sur les media types. Les media queries reprennent donc la nomenclature des media types et la complètent, en proposant diverses possibilités de requêtes supplémentaires. Parmi lesquelles, la taille de l’écran, le mode de lecture, portrait ou paysage, ou encore la résolution. En poursuivant l’exemple précédent, la requête proposée pourrait se compléter par la largeur minimum du device utilisé :

<link type="text/css" href="mobile.css" rel=stylesheet media="handheld and (max-width: 200px)" >

Bien entendu, chacune de ces requêtes pouvant se compléter les unes les autres, il est possible d’affiner en fonction des besoins :

<link type="text/css" href="mobile.css" rel=stylesheet media="handheld and (max-width :320px) and (orientation:portrait)" >

De même, plusieurs requêtes peuvent être associées à une même feuille de style CSS, en utilisant un séparateur de type ‘-‘ qui prendrait ici la fonction d’un OR booléen…

<link type="text/css" href="style.css" rel=stylesheet media="handheld and (min-width: 320px) - screen" >

En règle générale, nous pouvons nous retrouver avec 6 feuilles de styles CSS afin de correctement prendre en compte la gestion des contenus. Ces feuilles de styles se répartiraient sur :

• La feuille de réinitialisation, reset.css,
• La feuille de style contenant toutes les parties communes aux divers supports. (couleurs d’écritures, couleurs de fonds, typos etc…),
• La feuille pour les appareils mobiles,
• La feuille pour les tablettes,
• La feuille pour la gestion des écrans de bureau,
• La feuille dédiée à l’impression.

Ce genre d’implémentation peut se présenter du côté du code de la manière suivante :

<link type="text/css" href="reset.css" rel=stylesheet media="all" >
<link type="text/css" href="commun.css" rel=stylesheet media="all" >
<link type="text/css" href="mobile.css" rel=stylesheet media="(max-width :320px)" >
<link type="text/css" href="tablette.css" rel=stylesheet media="(min-width: 301px) and (max-width :650px)" >
<link type="text/css" href="ecran.css" rel=stylesheet media="(min-width: 651px)" >
<link type="text/css" href="impression.css" rel=stylesheet media="print" >

Comme disent les anglais, so far so good, seulement voilà, l’histoire ne s’arrête pas là. Cela se complique quand les constructeurs font en sorte que, malgré la petitesse de leur écran, certains mobiles puissent afficher un site bien plus large qu’on aurait pensé. De ce fait, les tailles indiquées ne permettent pas à la bascule magique d’opérer. Dans son article, Les mobiles nous mentent, Raphaël Goetter explore et collecte un grand nombre de données à ce sujet.

Dans la même veine, certains navigateurs de mobile tentent de zoomer sur les contenus, afin de les rendre plus lisibles. Seulement là encore, si nous nous sommes déjà chargés de cette prise en compte, les navigateurs peuvent alors nous compliquer la tâche au lieu de nous la simplifier. Le w3c propose de contourner ces problématiques en paramétrant correctement l’élément Meta Viewport. À ce sujet, il est intéressant de se rapprocher de l’excellent article Using the viewport meta tag to control layout on mobile browsers paru sur Mozilla Developer Network.

Afin de s’assurer de chaque paramètre renvoyé par les navigateurs et les mobiles, il est également possible de se rendre sur des pages de tests, qui vont refléter l’ensemble de ces résultats. Vous pouvez par exemple, vous rendre sur l’un des liens suivants :

• Test Your Device: Responses to the @media Query
• Media Query Test
• Test your CSS media queries features

Si on interprète les paramètres ci-dessous, on constate qu’il est donc possible d’indiquer aux navigateurs, de bien adapter la largeur à la largeur du mobile, et de préserver une échelle de 1 tout en bloquant le zoom utilisateur ;

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />