L'essentiel des CSS

Utiliser les media queries

Testez gratuitement nos 1272 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Lorsque vous appliquez des règles à une page, ces règles sont employées quels que soient les périphériques utilisés. Voyez que vous pouvez exploiter des requêtes de médias pour cibler l'emploi des CSS au cas par cas.
05:05

Transcription

Une fois des déclarations ou des règles CSS appliquées à une page, celles-ci s'appliquent, quelle que soit la nature de l'outil qui va servir à naviguer, qu'on soit sur une tablette, qu'on soit sur un smartphone, qu'on soit sur un écran d'ordinateur dans un navigateur, et peu importe sa dimension. Ces styles vont s'appliquer. Or, on va s'apercevoir qu'on n'a pas besoin des mêmes styles, en fonction des périphériques. Alors, pour cela, très tôt, le W3C a proposé ce qu'on appelle les « media types » et les media types vont régir, au travers d'une certaine liste, ici, un certain type de lecteur d'information, et vont s'adapter à celui-ci. Donc « all » pour tout le monde, « braille », « embossed », « handheld », et on le comprend directement dans la traduction. Enfin, je veux dire, c'est très explicite. Sauf que, par exemple, dans la catégorie « handheld », ici, on pouvait trouver un Nokia 3366 au même niveau qu'un iPhone. C'est tous les deux des périphériques portables mobiles, et donc il n'y a pas de distinction entre l'un comme l'autre. Alors, il est arrivé avec CSS3 ce qu'on appelle les « media queries » et les media queries vont pouvoir s'adapter, en fonction du périphérique, mais surtout apporter ce qu'on appelle des requêtes. C'est à dire qu'on aura toujours les mêmes périphériques, sauf qu'on va pouvoir venir vérifier la largeur, la hauteur, la largeur du périphérique, si c'est un périphérique couleur, s'il n'est pas couleur, quelle est sa résolution, etc. Et donc, là-dessus, on va pouvoir venir affecter notre contenu de manière différente. Alors plusieurs possibilités, là encore, pour pouvoir utiliser les media queries. La première va être de pouvoir utiliser un attribut @media, ici, tout simplement en lui affectant une fonction classique, un peu comme si on faisait du Javascript, et à l'intérieur de cette fonction, on va venir dire la propriété, on va venir évaluer une requête, donc là, si cette largeur minimum est de 700 pixels. Donc, dès l'instant où on sera en 400 pixels, ce ne sera pas affecté, il faudra, qu'au minimum, la largeur soit de 700 pixels. Et là, on va pouvoir venir, au sein de cette requête @media, venir définir autant de règles, contenant des descriptions qu'on souhaite. On va pouvoir, bien entendu, rajouter également d'autres requêtes media, ici, toujours dans la même page, en disant cette fois-ci : Attention, il faut au minimum faire en 400 pixels et au maximum faire 699. Alors faites attention de toujours garder un pixel d'écart, avec les max et les min, pour éviter le dilemme qu'il y aurait, alors il n'y aurait pas de dilemme car le dernier qui parle aurait raison, on le verra au niveau de la cascade. Mais évitez ces dilemmes de compréhension qu'on pourrait avoir entre un pixel qui aurait à la fois une déclaration et une autre. Donc faites bien attention à cela. Dès l'instant où on va avoir défini ces requêtes-là, j'enregistre, on va pouvoir venir tester dans le navigateur. Et si j'actualise, on voit bien qu'ici, j'ai une certaine dimension, donc automatiquement, j'ai un mode d'affichage, et si je réduis, dès que je vais arriver en-dessous de 400 pixels, j'ai un autre mode d'affichage qui s'est mis en route. Vous voyez, il n'y a pas la bordure, la typo n'est pas tout à fait la même. C'est écrit un petit peu plus petit, vous voyez, à ce changement de rupture, on a notre partie de feuille de style qui est impliquée. Alors il y a d'autres possibilités de pouvoir l'utiliser, on avait vu tout à l'heure les feuilles de style externes, alors, ici, on pourrait très bien avoir tout cela dans une simple feuille de style externe mais on va voir que, au moment de la liaison, on peut également utiliser des requêtes. Donc ici, on va utiliser une liaison, en complément, donc une feuille de style complémentaire, ici, classique, qui va utiliser un attribut media et qui va dire : dans cet attribut media, je ne veux que de du screen, c'est à dire que des choses qui se passent à l'écran. Je ne veux pas toucher l'imprimante, je ne veux vraiment toucher que l'écran, à ce niveau-là, et surtout, je veux, au minimum, avoir une largeur de 399 pixels. Donc dès l'instant où on aura cet élément-là, on va pouvoir lier notre feuille de style qui serait la feuille de style n°2, et cette feuille de style n°2 dira : je veux un font-size de 0,9 et vous comprenez que, donc, la magie va opérer. Mais on peut avoir d'autres possibilités de liaison qui seraient par exemple de se dire, au moment de l'impression, il y a plein de choses dont je ne veux pas. Et donc, ici, on va pouvoir cette fois-ci lier, sans passer par des media queries, simplement des medias, sans faire de requête spéciale, en disant : attention, si on est au moment de l'impression, à ce moment-là, tu me lis cette feuille de style-là. Et là, dans la feuille de style n°1, ce qu'il faut penser à faire ici, c'est de dire : attention, tout ce qui est header, tout ce qui est footer, tout ce qui est aside, de premier niveau du body, alors, bien entendu, venez affecter ces éléments-là par votre contexte à vous, et de dire : je ne veux pas qu'ils s'affichent, display none, ils ne seront pas affichés, donc on n'aura pas le header, la barre de menu, la barre de navigation, le footer, tout ça, ça ne sera pas imprimé, et puis surtout, j'aimerais imprimer en douze points, avec un line-height de 1.5 un rapport de 1,5 qui est le rapport le plus lisible possible, dans ce contexte-là, pour pouvoir afficher. Alors là, comment mettre ça en résultat ? Tout simplement en lançant une impression. Donc il suffit d'actualiser sa page et de venir faire : Fichier, Imprimer. Et vous avez un aperçu de votre impression, telle qu'elle serait, en prenant en compte tout ce qui sera décrit et défini dans la feuille de style. Donc, en résumé, pensez à lier vos feuilles de style, toujours au travers de requêtes de media, pour pouvoir permettre de cibler vraiment périphérique par périphérique vos besoins et vos attentes de rendu.

L'essentiel des CSS

​Explorez et assimilez les outils de base des CSS pour en comprendre les interactions visuelles. Structurez et gérez ainsi l’apparence et le visuel de vos sites web.

5h09 (54 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
Thématiques :
Design web
Standards du web
Spécial abonnés
Date de parution :28 avr. 2016

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !