L'essentiel des CSS

Évaluer les valeurs proportionnelles

Testez gratuitement nos 1325 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Il y a du bon et du moins bon dans l'usage des unités proportionnelles. Heureusement, il y a souvent une solution aux problèmes. Illustrez les plus et les moins de l'usage de l'EM.
04:58

Transcription

De telles unités sont assez intéressantes parce qu'elles vont nous permettre de préserver une proportionnalité en fonction du contexte. Elles vont avoir, donc, certains avantages mais, en contre-partie, elles auront des inconvénients. Regardons dans un premier temps les avantages. Ici, je suis passé en font size 62. 5, histoire de pouvoir passer en décimal, et donc, j'ai une proportionnalité, ici, de 2,6 qui équivaut en gros à 26 pixels, dans le h1, et 1,6 qui équivaut à 16 pixels dans le paragraphe. Jusque là, c'est très bien. Par contre, ici, on voit bien que j'ai des span à l'intérieur, et de mon titre, et de mon paragraphe, qui ont été classés proportionnels, tous les deux, et que j'aimerais pouvoir distinguer. Alors j'aimerais pouvoir les distinguer de deux manières, c'est à dire, autant visuellement, au niveau de l'ornementation, c'est à dire les placer en italique et puis les souligner, ici. Ctrl + S, j'actualise, parfait. Mais je les trouve un peu trop gros maintenant, parce qu'ils sont trop en valeur, ils devraient être un peu en emphase, en exergue de ce système-là, donc je pourrais très bien me dire : « J'aimerais qu'ils soient plus petits. » Mais plus petits, le premier fait 26 pixels, le second fait 16 pixels si je définis les valeurs en dur, ici, il faudrait que je dise : « Dans le cas du haut, il faudrait que tu le passes à 24, mettons, dans le cas du bas, il faudrait le passer à 14 », donc ça me ferait faire deux classes. Ici, il suffit simplement que je dise : « Je fais un font size de 0,9 em », et ce 0,9 em va être contexuel, c'est à dire qu'ici, ça va être 0,9 de 2,6 et de 1,6 aussi. J'enregistre et regardez, c'est tout à fait ce qui se passe. C'est à dire que maintenant, on garde bien la proportionnalité contextuelle dans laquelle on se situe par rapport au parent conteneur. Jusque là, donc, c'est parfait, c'est que de l'avantage. Maintenant, mettons en lumière l'inconvénient. On va isoler le cas de figure du span, tout simplement, donc je ne suis plus que dans mon paragraphe, avec un span class proportionnel. Ici, donc, on a bien notre élément, ici, qui fait 0,9, voilà, ici. Donc c'est parfait, ça correspond bien à ce que je souhaite. Donc je suis à 1,6 em et j'ai mon font size de la proportionnelle qui fait 0,9 em. Mais qu'en serait-il si je me disais : « Je ne veux pas qu'il fasse 90 %, en fait de 16. Je voudrais qu'il fasse 1,4 em. » Moi, je pars du principe que je me suis dit : « L'em, en gros, ça correspond à dix pixels ici, donc mon paragraphe, c'est 1,6, si je veux écrire en 14, il faudrait 1,4 ». Rappelez-vous ce que je vous disais au départ, c'est à dire que c'est la taille en pixels de l'élément parent, ou de l'élément conteneur, si celui-ci a été redéfini. Donc ici, par exemple, si j'ai 0,2 em, est-ce que ce 0,2 em correspond à ce 10 pixels, ici, est-ce qu'il correspond à ce 16, est-ce qu'il correspond à ce 1,4 ? Et c'est là la question qui est pleine. Regardez ici, si j'enregistre et que j'actualise, la réponse va être donnée de suite. Vous avez vu comme c'est devenu plus gros ? En fait, le 1,4 ici fait 1,4 fois la taille de 1,6. C'est à dire que si je regarde bien ici, je fais 16, ici je fais 1,4 de 16, un calcul de tête, ça fait 22,4 pixels. Et le 0,2 en fait, n'est plus basé sur ce 1,6, il est basé sur ce 1,4 de 1,6 donc il fait 2 pixels et quelques. Donc c'est extrêmement compliqué que de devoir utiliser des imbrications d'em. On ne peut pas le faire. Donc il existe depuis CSS3 une nouvelle unité, qui est un peu plus ancienne que CSS3, mais qui s'est surtout démocratisée à ce moment-là et qui a été intégrée par tous les navigateurs, c'est le rem. Donc, pour cela, on va définir, non plus maintenant, nos font size en em, dès qu'on a besoin de les imbriquer à ce niveau-là, on va les utiliser en rem. Et un rem, lui, fera référence, toujours, à la font size racine, donc, de la source, c'est à dire du body. Donc si je prends 1,6 rem cette fois-ci, et non pas m, je vais avoir exactement la même unité pour ce cas-là, sauf que, si ici, maintenant, alors celui-là, je vais le commenter, j'utilise un font size de 1,4 rem, je serai bien en 14 pixels, maintenant, ici, comme je le souhaitais, comme je [l'attendais]. Ici, si je prends 1,4 rem, ici, ctrl + S, je vais bien avoir cet élément qui va correspondre. Donc ici, je suis bien en 16 rem, je ne suis plus en 1,6 em, et maintenant, ici, je suis bien en 14. Donc tout est bien revenu à l'ordre à ce niveau-là. Par contre, faites bien attention aux petits détails. C'est que, ici, le 0,2 se base toujours en em, ici, se base sur le rem, ici, quoi qu'il en soit. D'accord ? Donc si vous mettez 0,2 rem, vous passerez à 0,2 pixels. Donc faites bien attention à ces mariages-là. Donc voilà les avantages qu'on peut avoir d'un côté, sur la proportionnalité, qui va être la ré-exploitation, comme on l'a vu dans des cas comme ça, d'une classe, surtout quand ça va en dessous de la valeur, c'est à dire qu'on est dans un pourcentage qui n'a pas dépassé 100 %. Par contre, les inconvénients, c'est que dès l'instant où on va dépasser 100 %, on va se retrouver avec un blocage, et pour ça, la roue de secours, ça va être d'utiliser le rem.

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
Votre/vos formateur(s) :
Date de parution :28 avr. 2016
Durée :5h09 (54 vidéos)

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 !