Reponsive design : les Media Queries

Avant, créer un webdesign, c’était simplement créer l’interface pour les écrans d’ordinateurs. Il y avait plusieurs contraintes, notamment la gestion des différents navigateurs, mais on devait aussi faire avec les différentes résolutions existantes. Aujourd’hui, c’est toujours le cas, mais le problème des résolutions est devenu encore plus important avec l’avènement de la navigation mobile. C’est pourquoi on parle maintenant de responsive design, un terme qui regroupe diverses choses et qui signifie en gros qu’un design peut s’adapter aux différentes tailles d’écran.

Et si avant on pouvait facilement s’en sortir avec de simples pourcentages, la petite taille des écrans des terminaux mobiles a cassé cette facilité. Aujourd’hui encore, énormément de sites ne sont pas adaptés à la navigation mobile : il faut non seulement monter et descendre le long de la page (ça c’est normal), mais il faut également aller de gauche à droite si on veut avoir accès à tout. C’est donc très peu pratique et c’est pourquoi, si vous souhaitez que vos visiteurs profitent d’une bonne expérience utilisateur sur leur mobile, il est impératif de rendre votre webdesign responsive.

Les Media Queries

Passée cette longue introduction qui vous aura, je l’espère, convaincu, il faut passer à l’action et ça passe par la réponse à la question que vous vous posez sûrement : qu’est-ce qui peut bien remplacer les pourcentages ? En fait, rien. Il ne s’agit nullement de remplacer cet outil qui fonctionne très bien, mais de le compléter, car aujourd’hui il ne suffit plus.

Nous allons donc parler ici des Media Queries, une spécification qui nous vient directement de CSS3 et qui permet de spécifier diverses propriétés CSS en fonction de la résolution et d’autres paramètres. On pourrait donc facilement le comparer à un outil vous permettant de faire du CSS conditionnel. Et si il était possible de le faire avant, sans CSS3, il fallait cependant passer par le JavaScript et cela pouvait s’avérer compliqué, ce qui n’est plus le cas.

Bien sûr, on ne parle pas de CSS3 sans parler de compatibilité avec les navigateurs et là, on peut tout de suite arrêter de se poser des questions : tous les navigateurs récents gèrent les Media Queries. Mais ces dernières servent principalement aux interfaces mobiles et les mobinautes mettent régulièrement leurs applications à jour (pour la simple et bonne raison qu’ils sont au courant que les mises à jour existent et qu’elles peuvent se faire facilement), donc nous ne devrions pas avoir de soucis quant au fait que ceux qui en ont besoin pourront en profiter.

Ainsi, pas d’inquiétudes : vous créez votre design normalement et avec les Media Queries, vous vous chargez d’adapter quelques morceaux. Car en effet, vous n’aurez dans la plupart des cas pas besoin de tout adapter. Par exemple, il peut suffire de simplement masquer ou déplacer la sidebar. Que ce soit bien clair, donc : votre CSS ne sera pas bourré de conditions, il n’en contiendra que quelques-unes vous permettant de modifier des détails.

Et vous pourriez d’ailleurs très bien ne pas inclure de Media Queries à l’intérieur même de votre fichier CSS. En effet, vous pouvez aussi créer une nouvelle feuille de style qui modifiera tout ce qu’il faut et qui sera utilisée de façon conditionnelle. Concrètement, vous aurez deux feuilles de style : l’une modèlera le site comme il faut tandis que l’autre s’occupera de modifier quelques détails pour les plus basses résolutions. La première sera incluse normalement, comme vous en avez l’habitude. Pour la seconde en revanche, c’est là que tout change. Enfin, tout, c’est un grand mot puisque c’est uniquement le contenu de l’attribut media de votre balise link qui sera modifié :

Comme vous pouvez le constater, rien d’autre ne change. Quant au contenu de l’attribut media, nous allons y revenir, mais avant parlons de l’autre façon de faire des Media Queries. Cette autre façon, c’est tout simplement dans le fichier CSS lui-même, avec le mot-clé @media. Voici la même condition que précédemment mais cette fois dans le CSS lui-même :

@media screen and (max-width: 480px) {
	elt1 {
		propriete: valeur;
		propriete: valeur;
	}

	elt2 {
		propriete: valeur;
	}
}

L’écriture est la même : vous remplacez l’attribut media par @media et le tour est joué.

Constuire une Media Query

Il est donc temps maintenant de voir la façon dont on construit de telles conditions. Premièrement, le mot screen que l’on vient de voir possède la même signification que celle que vous lui connaissiez déjà dans la balise link (media= »screen » seul) : les styles ne s’appliquent qu’à l’affichage sur un écran. Vous pouvez donc remplacer cette valeur par ce dont vous avez besoin, comme print par exemple.

Si on continue d’analyser notre exemple, nous trouvons max-width suivi d’une valeur en pixels. Comme son nom l’indique, il s’agit donc tout simplement de n’appliquer les styles qu’aux écrans possédant une largeur inférieure ou égale à la valeur indiquée (ici 480 pixels). Vous pourrez également utiliser min-width ou width tout court, et idem avec la hauteur en remplaçant « width » par « height » dans les expressions citées précédemment.

D’autres conditions sont possibles mais peuvent s’avérer moins utiles, comme device-width ou device-height qui sont respectivement la largeur et la hauteur en pixels du terminal (que vous pouvez faire précéder d’un min ou d’un max).

Lier les conditions

Il reste donc une chose à expliquer : le and qui relie les deux expressions déjà expliquées. Pour ceux qui sont fâchés avec l’anglais, « and » signifie « et« , et permet donc de dire que l’on veut les deux choses en même temps (ici on veut que l’affichage soit sur un écran et que cet écran fasse moins de 480 pixels de largeur). Vous pouvez demander autant de conditions à réaliser en même temps que vous le souhaitez en alignant autant de and.

Si vous le souhaitez vous pouvez aussi créer un « ou« . Ce dernier ne vous dépaysera pas puisqu’il s’agit du même « ou » que l’on retrouve en CSS « classique ». En effet, que faire si vous voulez qu’un style s’applique sur deux balises différentes en même temps ? Vous séparez le nom de ces deux balises par une virgule, simplement. Ici, c’est pareil : vous séparez vos différentes conditions par des virgules.

Un exemple pour bien comprendre

Parce que comprendre c’est bien, mais savoir comment on assemble tout ça, c’est mieux, voici un petit exemple :

@media screen and (max-width: 480px), screen and (min-width: 900px) {
	div#sidebar {
		display: none;
	}
}

Ici, on masque la sidebar dans deux cas différents : si l’écran fait moins de 480 pixels ou si l’écran fait plus de 900 pixels (ce dernier cas est absurde mais c’était simplement pour donner un exemple de l’utilisation des virgules).

Bien joué, Ô toi qui es arrivé jusqu’ici

Voila, c’est tout, je n’ai volontairement pas décrit toutes les propriétés utilisables car elles sont souvent reliées à des utilisations bien spécifiques. Si vous voulez en savoir plus, je vous conseille donc d’aller tout simplement voir la spécification du W3C. À noter que le résultat peut parfois être surprenant sur les mobiles, avec des max-width qui ne s’appliquent pas alors qu’ils le devraient par exemple… Il s’agit là d’un problème que nous aborderons dans un prochain article et qui trouve son explication dans ce qu’on appelle le viewport.