Dans cette leçon vidéo, le formateur explique pourquoi le design responsive est devenu indispensable avec la diversité des appareils (ordinateurs, smartphones, tablettes, TV). Il introduit les media queries CSS comme moyen de conditionner les styles en fonction du support, décrit la syntaxe de base (@media, type de support, conditions de largeur, orientation, aspect‑ratio, etc.) et montre comment les combiner. À l’aide d’un exemple concret – un menu accordéon horizontal – il modifie le HTML/CSS existant, applique Flexbox pour étirer le conteneur, puis ajoute une media query (max‑width 600 px) pour transformer le menu en vertical lorsque la largeur du navigateur est petite. Il détaille les différentes propriétés utilisables dans les requêtes (max‑width, min‑width, width, aspect‑ratio, orientation, and). Ensuite, il montre comment tester le résultat avec l’émulateur de périphériques de Chrome. Le formateur explique le rôle du viewport meta tag (width=device‑width) pour que les navigateurs mobiles utilisent la résolution CSS du dispositif plutôt que le viewport par défaut, ce qui permet aux media queries de fonctionner correctement. La vidéo se conclut en rappelant d’appliquer les media queries et le meta viewport à tous les éléments qui doivent s’adapter, assurant ainsi un site réellement responsive.
Chapters
Bonjour à tous et bienvenue dans cette nouvelle leçon de CSS. Aujourd'hui nous allons voir les médias queries. Il y a quelques années, quand un développeur créait un site web, il savait d'avance que celui-ci sera consulté sur l'écran d'un ordinateur. Un écran aussi large le persuadait d'être plus créatif et présentait ainsi le contenu d'une manière de plus en plus originale. On trouvait alors des pages constituées d'un entrelacement fabuleux d'images et d'arrière-plans, et des fois même un petit contenu texte au milieu d'une page digne d'une aquarelle. La plupart de ces pages étaient créées à l'aide de tableaux HTML ou de divs flottantes ou positionnées. En ce moment, pour consulter une page web, la large écran d'un ordinateur ne fait plus l'unanimité, car d'autres supports ont gagné du terrain comme les smartphones, les tablettes, les Smart TV, etc. Alors, hors de question de concevoir une page web comme on le faisait avant, car il faut que celle-ci s'adapte à ces différents supports en offrant une consultation confortable et ergonomique à l'utilisateur quel que soit l'appareil dont il se sert pour se rendre sur notre site web. Une page adaptative à tous ces supports de navigation est dite responsive, d'où le nom du responsive design, qui est largement utilisé au milieu des intégrateurs et webdesigners. Il existe plusieurs techniques qui permettent de rendre une page adaptative aux supports. Celles utilisées en CSS s'appellent les Media Queries. Les Media Queries ou requêtes médias permettent de spécifier les styles CSS qui s'exécutent si une condition est satisfaite. À la base, seuls les types de supports constituaient la condition à satisfaire, comme l'écran d'un ordinateur, TV, smartphone, projecteur, etc. Mais ces conditions se sont étendues pour couvrir d'autres aspects comme les dimensions du navigateur ou de l'écran, l'orientation de celui-ci, le format de l'afficheur, etc. Mais en général, c'est la définition de l'écran ou les dimensions du navigateur qui est le plus considéré pour décider du style CSS qu'il faut appliquer. Jetons un coup d'œil sur la page suivante. Il s'agit d'une page responsive, c'est-à-dire qui s'adapte aux différents supports de navigation. Par exemple, ici c'est l'aperçu sur un navigateur avec un écran large. Si je redimensionne le navigateur, Alors on constate que l'affichage change aussitôt. Par exemple, le menu ici est devenu rétractable. Il y a d'autres points qui vont changer par la suite. Là par exemple, cet alignement qui est horizontal, avec une largeur encore plus petite, ça devient vertical afin d'accueillir tous les éléments. Et tout en bas de page, nous avons par exemple le logo et le menu qui est en bas. Si je réduis encore davantage, le logo disparaît pour laisser place au texte qui est le plus important. Alors cette page, elle est responsive et c'est fait avec des media queries. Regardons le code HTML suivant. Il s'agit du code que nous avons déjà fait dans la leçon consacrée aux transitions CSS. L'objectif, c'était en fait de créer un menu accordéon. Alors c'est le même contenu HTML qui a été repris avec le même style CSS que nous avons fait l'autre jour. Quand j'exécute pour voir le résultat sur navigateur, ça va ressembler à ceci. C'est un menu accordéon horizontal. On va procéder à certaines modifications pour étaler le menu sur la page entière, pour ne pas laisser cette place-là. Alors on va appliquer les flexbox sur le conteneur. Ici le conteneur c'est nav. Il suffit d'aller ici mettre nav display flex. On va aussi agrandir la largeur du menu, par exemple 400 pixels, pour assurer l'étalement sur la ligne entière. Quand j'exécute, on aura le menu qui ressemble à ceci. Bien sûr, donc il y a un effet qui a changé légèrement parce qu'ici par défaut la valeur de align-items c'est stretch. Alors je vais la changer aussi. Align-items, je vais mettre plutôt la valeur flex-start. Et ça donne ceci. Bon, on peut aussi intégrer quelques marges. Alors là, je vais mettre plutôt sur le 1, mettre margin par exemple 2 pixels, et ça donne cet effet à la fin. Maintenant, l'objectif c'est quoi? C'est que quand je redimensionne le navigateur, ça veut dire quand je vais atteindre une certaine largeur, il faut que le menu devienne vertical. Ça veut dire le menu accordéon vertical plutôt qu'horizontal afin que l'affichage soit confortable. Par Parce que regardez ici, il y a une barre de défilement qui s'affiche et qui altère un petit peu l'affichage de la page. Alors on va rendre la page comme elle était. Maintenant ce qu'on va faire, c'est ajouter une règle média. Bon, tout d'abord sachez qu'il y a plusieurs manières d'appliquer les media queries en CSS. La plus basique d'ailleurs, mais bien sûr la moins recommandée, c'est de copier cette ligne et l'appliquer une deuxième fois. Bon, maintenant imaginez que vous disposez de 2 feuilles de style, une qui s'appelle style1.css une autre qui s'appelle style2.css. On va tout simplement dire au navigateur d'exécuter style1.css si le support utilisé est un écran, et si le support est mobile, alors dans ce cas on va appeler la feuille de style style2.css. On va donc ajouter l'attribut media, dans le premier cas avec la valeur screen pour dire écran, et là on va mettre la valeur handheld. Pour dire un support mobile. Alors dans ce cas, le navigateur il va automatiquement voir sur quel environnement il est exécuté. Si c'est un écran, alors il va charger style1.css, et si c'est un équipement mobile, alors dans ce cas il va charger style2.css. Mais cette technique n'est pas très recommandée parce que tout simplement on va essayer de centraliser notre style CSS autour d'une feuille ou bien ensemble de feuilles CSS que l'on connaît. Alors on va éliminer ça. On va conserver le code de tout à l'heure comme ceci. Et maintenant on va aller sur la feuille de style CSS et on va voir que le style que nous avons déjà déclaré, c'est un style qui concerne tous les supports. C'est-à-dire il n'y a pas de condition qui dit qu'il faut exécuter ça ou ça. Ça veut dire ça va s'exécuter dans tous les cas. Maintenant on va ajouter une règle média ou bien une media query grâce à la règle @media comme ça. Et on met la valeur screen. C'est-à-dire c'est la même chose que l'attribut media avec la valeur screen dans la balise style de tout à l'heure. Maintenant entre ces deux accolades on va tout simplement spécifier les différents styles qui vont s'appliquer exclusivement aux écrans. Par exemple imaginez que je veux changer le style de nav. Alors il suffit de le mettre ici. Comme ça, et on va par exemple dire que je veux que ça devienne bloc. C'est-à-dire pour les écrans, je veux que ça devienne bloc. Mais remarquez que quand je dis un écran, je spécifie pas est-ce que c'est un écran large ou bien un écran étroit, etc. Alors que généralement il faut s'intéresser à la définition de l'écran ou bien la résolution de celui-ci. Alors on va ajouter notre condition qui est int, et entre les parenthèses on va mettre des informations qui concernent le support, par exemple max width 600 pixels. Ça veut dire que si la largeur du navigateur ne dépasse pas 600 pixels, c'est-à-dire s'il est inférieur ou égal à 600 pixels, alors dans ce cas ce style sera appliqué. Alors la condition pour que ce style soit appliqué, c'est il faut que le support soit un écran, et deuxièmement il faut que la largeur du navigateur embarqué dans cet écran ne dépasse pas 600 pixels de largeur. Donc maintenant si on exécute, on va voir le résultat suivant. Ici sur un écran large, ça veut dire qu'il dépasse 600 pixels, mais si le navigateur passe en dessous des 600 pixels, on constate bien que le style a changé. Donc le point de commutation est le suivant, donc là c'est supérieur à 600 et là c'est inférieur à 600 pixels. Si on veut agir sur la largeur de ce menu, ça veut dire on veut que ça occupe la totalité de la ligne, alors on va encore retourner dans le code CSS, on va reprendre le style nav1. Comme ça. Bon, ici c'était inline-block, on peut mettre par exemple display block carrément avec une largeur automatique. Bon, parce qu'on sait que les blocs occupent la ligne entière. Quand j'exécute pour voir le résultat, on constate maintenant que ça occupe la ligne entière. Alors au-dessus des 600 pixels, voilà ce qu'on a, et en dessous, voilà le résultat qu'on obtient. Bon, notez qu'en CSS, bien sûr, il n'y a pas que ces propriétés que l'on peut changer. Donc il y a max-width pour dire la largeur maximale, il y a min-width pour dire la largeur minimale, il y a aussi width tout court pour dire la largeur doit exactement correspondre à la valeur spécifiée. Donc il y a aussi aspect-ratio pour dire les proportions du navigateur ou bien de l'écran, par exemple 16/9 ou bien 4/3. Il y a aussi orientation c'est-à-dire l'orientation, si vous voulez portrait ou bien paysage avec les valeurs landscape ou bien portrait, etc. Bon, c'est-à-dire il y a beaucoup de paramètres que l'on peut spécifier, mais en général on se contente des dimensions. Ici il faut noter qu'on peut pas se contenter que d'une seule condition, on peut mettre une autre condition, par exemple and min-width 400 pixels. Bon, ça veut dire dans ce cas que ce style sera appliqué uniquement si la largeur du navigateur est comprise entre 400 pixels et 600 pixels, etc. Donc c'est comme ça que ça marche en général pour les media queries. D'accord, maintenant on va faire un test. On va aller sur le navigateur et on va essayer de charger un émulateur de smartphone. Il suffit de mettre inspecter ici sur Chrome et on va choisir cette option. Donc là on va choisir par exemple un smartphone, par exemple Galaxy S5. L'aperçu que nous avons c'est ça. Bon, c'est-à-dire c'est un émulateur, il va simuler l'apparence de notre page web sur le smartphone Galaxy S5. Dans ce cas, bien sûr, on peut changer le type de support ici. Bon, il y a aussi la résolution qui est donnée par défaut, donc c'est 360 pixels sur 640 pixels. Vous constatez bien que la largeur de l'écran, c'est 360 pixels, et pourtant, ça veut dire je suis bien en dessous des 600 pixels que j'ai spécifiés dans les médias queries, et pourtant le menu est toujours resté horizontal. Ça ne s'est pas appliqué, et c'est tout à fait normal parce qu'il ne s'agit pas de la résolution réelle. En fait, on appelle cette résolution une résolution CSS ou bien Device Width et ça nous mène vers la définition de ce que l'on appelle le viewport. Alors, le viewport est l'espace exploitable par les navigateurs. Cette notion s'intéresse principalement aux navigateurs embarqués sur des appareils mobiles où ceux-ci, c'est-à-dire ces navigateurs, ne sont pas redimensionnables et occupent la totalité de l'afficheur du support. Par défaut, le viewport, à savoir la largeur et la hauteur, mais principalement la largeur, a été défini sur les navigateurs afin que ceux-ci puissent faire entrer une page web entièrement quelle que soit sa largeur, c'est-à-dire qu'aussi large soit la page, elle sera affichée en entier sans laisser apparaître les barres de défilement horizontales. Bien entendu, les textes et les autres éléments seront tellement petits qu'il faudrait zoomer afin de pouvoir les distinguer. En réalité, c'est ce viewport qui est utilisé par défaut par les navigateurs afin qu'ils affichent une page web, même si celle-ci est responsive. Heureusement, les constructeurs des appareils mobiles ont aussi prévu une autre définition de l'écran autre que la définition réelle et le viewport par défaut, Cette définition s'appelle la résolution CSS ou device width. Pour un Galaxy S5 par exemple, la largeur CSS prévue par le constructeur est 360 pixels. Tout ce qu'il faut faire maintenant, c'est demander au navigateur d'utiliser la résolution CSS dite device width comme valeur du viewport pour consulter notre page web. Pour faire ceci, on utilise la balise meta suivante. On va aller dans le code HTML. On va ajouter la balise meta name comme valeur viewport et comme contenu, bien content, on va mettre width, c'est-à-dire la largeur, égale device-width. Dans ce cas, cette balise meta, elle communique avec le navigateur, il lui demande tout simplement d'utiliser la largeur CSS du support, ce qu'on appelle device-width, plutôt que le viewport par défaut ou bien la résolution réelle embarquée par ce support. Bon, maintenant quand j'exécute pour voir le résultat, on constate bien que le menu est devenu vertical. Alors c'est de cette manière qu'il faut procéder toujours quand vous voulez rendre une page responsive. Il faut appliquer les media queries sur la feuille ou bien les feuilles de style que vous avez utilisées, et aussi il faut déclarer la balise meta viewport comme ça. Voilà, maintenant je crois que vous avez compris le principe de responsive design à l'aide des media queries en CSS. Il suffit d'appliquer ceci partout, ça veut dire sur tous les éléments que vous voulez qu'ils changent d'apparence en passant d'un dispositif à un autre, et ça devrait marcher. Merci pour votre attention et à la vidéo prochaine.
