Utiliser les media queries pour créer un design responsive

Dans cette nouvelle leçon, nous allons découvrir dans le détail ce que sont les requêtes media ou Media Queries, comprendre comment elles fonctionnent et apprendre à les utiliser.

 

Définition des Media Queries

Les Media Queries correspondent à des styles CSS conditionnels. Les Media Queries se basent sur la règle CSS @media qui va nous permettre de définir différents styles CSS pour différents types d’appareils media et selon différents critères.

Nous allons ainsi, grâce aux Media Queries, pouvoir présenter le même contenu HTML de différentes façons en fonction de l’appareil utilisé par nos visiteurs pour accéder à nos pages.

On va ainsi par exemple déjà pouvoir changer la disposition des éléments ou la couleur de fond de nos pages en fonction de la taille de l’écran d’un utilisateur :

See the Pen Cours HTML CSS 14.3.1 by Pierre (@pierregiraud) on CodePen.

N’hésitez pas ici à recopier le code ou à l’ouvrir directement dans CodePen puis à jouer avec la taille de votre fenêtre pour voir les changements de présentation !

 

Le fonctionnement des Media Queries (syntaxe)

Dans notre règle @media, nous allons pouvoir placer deux types de conditions ou de contraintes : une condition sur le media utilisé pour afficher la page et une condition sur les caractéristiques du media.

A l’origine, on pensait que créer une condition sur le type de media serait suffisante et il n’y avait pas de conditions sur les caractéristiques des media.

Cependant, au fil du temps nous nous sommes rendu compte qu’il était beaucoup plus simple et plus logique d’ajouter des conditions sur les caractéristiques d’un media plutôt que sur son type.

Ainsi, on peut s’attendre à ce que la condition sur le type de media soit complètement dépréciée dans le futur. A l’heure actuelle, nous pouvons choisir parmi les types de media suivants :

• all : Valeur par défaut. Nos règles vont s’appliquer à tous les appareils ;
• screen : Nos règles ne vont s’appliquer qu’aux appareils dotés d’un écran ;
• printer : Nos règles ne s’appliqueront que pour les imprimantes ;
• speech : Nos règles ne s’appliqueront qu’aux liseurs d’écran qui sont capable de rendre le contenu d’une page de manière sonore.

Nous allons également pouvoir inverser la valeur logique d’un test avec le mot clef not. En plaçant le mot clef not avant le type de media, nos règles s’appliqueront à tous les appareils media sauf celui spécifié.

Ensuite, nous allons pouvoir créer des conditions sur les caractéristiques du media. Notez déjà qu’on peut créer autant de conditions sur des caractéristiques différentes que l’on souhaite.

Nous allons devoir entourer chaque condition sur une caractéristique media avec un couple de parenthèses et allons pouvoir séparer deux conditions avec les mots clefs and (et) ou or (ou).

Dans le cas où on utilise and, les deux conditions devront être vérifiées. Dans le cas où on utilise or, il suffira qu’une condition soit vérifiée.

Il existe de nombreuses caractéristiques sur lesquelles on peut effectuer nos tests. Cependant, en pratique, nous utiliserons généralement des conditions de taille pour distinguer entre différents appareils et utiliserons pour cela les propriétés width, min-width et max-width.

Sachez toutefois qu’on peut également conditionner l’application de nos styles CSS à la hauteur d’un media, sa résolution, son processus de scan, à la présence d’un appareil de pointage parmi les mécanismes de saisie et sa précision ou encore à la capacité de l’appareil à survoler les éléments.

 

Utilisation pratique des Media Queries

Depuis quelques années, la majorité des recherches web se font sur mobile. C’est la raison principale qui a amené Google à aujourd’hui indexer la version mobile des sites Internet et non plus leur version bureau. Cela fait qu’il est indispensable d’avoir une version mobile performante aujourd’hui.

Pour cette raison, il est considéré comme une bonne pratique aujourd’hui de créer son site en version mobile d’abord puis d’utiliser les Media Queries pour modifier la disposition du code pour les écrans d’ordinateurs ou de tablettes.

Fonctionner de cette manière peut vous sembler tout à fait logique si vous n’avez jamais développé auparavant mais je peux vous assurer que c’est une façon de procéder qu’il est difficile de faire admettre comme norme pour des développeurs expérimentés et habitués à créer des sites version bureau puis à les décliner pour mobile.

Dorénavant, nous travaillerons comme cela : on construira la version mobile de nos pages d’abord et nous utiliserons les Media Queries pour adapter nos pages pour des grands écrans.

Illustrons cela immédiatement avec un exemple :

Résultat version mobile :

Résultat version tablette :

Résultat version bureau :

See the Pen Cours HTML CSS 14.3.2 by Pierre (@pierregiraud) on CodePen.

Dans cet exemple, nous travaillons avec trois niveaux de div : un premier élément conteneur global, deux sous-conteneurs et des div qui servent d’éléments dans ces sous conteneurs.

En CSS, on commence donc par créer nos styles mobiles. On va ici appliquer un display : flex à notre conteneur et à nos sous conteneurs afin d’en faire des conteneurs flexibles.

Nos sous conteneurs vont donc à la fois être des conteneurs flexibles et des éléments flexibles. Comme les écrans de mobile sont les plus petits, on choisit une organisation des éléments verticale en appliquant un flex-flow : column wrap à la fois à notre conteneur flexible principal et à nos sous conteneurs.

On applique également des couleurs de fond et des marges externes à tous les div afin de bien pouvoir les différencier visuellement.

Ensuite, on définit deux règles @media qui vont s’adresser à différents appareils.

Notre première règle @media est la suivante : @media screen and (min-width: 780px) and (max-width: 979px){}. Cette règle va cibler les appareils media dotés d’un écran dont la largeur est comprise entre 780px et 979px.

Si un utilisateur utilise un appareil qui remplit ces conditions, alors les styles CSS indiqués dans la règle @media seront appliqués. Ici, notre règle s’adresse aux écrans de taille moyenne de type tablette.

On va vouloir pour ces écrans disposer nos sous conteneurs en ligne mais conserver un affichage des éléments dans les sous conteneurs en colonne. On va donc seulement modifier la direction du conteneur principal.

Ici, il faut bien comprendre que les styles de notre règle @media vont être traités de manière prioritaire et surcharger les styles définis globalement si les conditions relatives à l’appareil sont remplies.

Cependant, les autres propriétés définies globalement et qui ne sont pas reprécisées dans notre règle @media vont continuer à s’appliquer normalement (comme la couleur de fond par exemple ou la direction des sous conteneurs et etc).

Finalement, notre deuxième règle @media s’adresse aux grands écrans. On va ici vouloir afficher tous nos éléments en ligne. Nous allons donc attribuer un flex-flow : row wrap à la fois à notre conteneur flexible principal et à nos sous conteneurs flexibles.