L'essentiel des CSS

Explorer les unités proportionnelles de taille

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Découvrez les trois principales unités concernant la proportionnalité de taille typographique : l'EM, l'EX et le CH. Ces trois unités vont vous permettre de travailler la typographie et de préserver ainsi la lisibilité des contenus.
08:40

Transcription

En ce qui concerne les unités proportionnelles de taille nous avons trois unités assez remarquables qui sont le em, le ex et le ch. Je vous propose pour commencer de nous focaliser sur le em. Nous avons vu que par défaut, les navigateurs ici s'entendent tous à écrire le texte, le contenu de base, en 16 pixels. Si on ne définit nullement aucune taille de font-size dans nos documents CSS, l'écriture se fera en 16 pixels. C'est ce qui se passe ici si j'actualise ma page dans ce contenu, je vois que c'est écrit en 16 pixels, pourquoi ? Tout simplement parce que c'est la taille par défaut du navigateur. Donc 1 em équivaut à cette taille-là. C'est à dire que ça équivaut à la taille font-size du conteneur parent, ou du conteneur dans lequel il se situe s'il a la possibilité de définir un font-size. On verra cette complexité dans une autre étape indépendamment. Revenons sur ce détail de 1em. Beaucoup de designer peuvent rencontrer un souci, notamment au moment de l'interprétation de 200 pixels. Disons qu'on ait 200 pixels à garder, une goulotte, une aside, une largeur peu importe et on souhaite l'interpréter en em. Ça voudrait dire qu'il faudrait faire 200 / 16 pour obtenir sa valeur qui serait de 12,5. Donc 200 pixels équivalent à 12,5 em si la taille typo de référence du conteneur parent est de 16 pixels. C'est quelque chose qu'on ne fait pas mais beaucoup de designer en ont besoin, de cette valeur-là. Si on raisonne en proportionnel, il faut rester proportionnel. Quand je raisonne en pourcent, je ne veux pas savoir si mon conteneur fait 30 pixels, 300 pixels, il fait 30% ou 40%, peu importe. Dans le em, je ne sais pas pourquoi, psychologiquement, les gens ont besoin de cette relation-là. Si on souhaite raisonner comme ça, on se dit, ce serait bien de raisonner en décimal, donc en 10 pixels. Combien ça vaut en relation 1 em, si j'étais en 16 pixels, ça vaut 0,625. C'est à dire 62,5 % Ce qui veut dire que si ici, je redéfinis mon font-size dans le conteneur parent et que je le mets avec une valeur de 62,5% ça veut dire que par défaut, mon 16 pixels, qui était défini au sein de mon navigateur, va passer à 10 pixels Regardez c'est ce qu'il se passe, ça passe en 10 pixels, puisqu'aucune font-size n'a été redéfinie. Alors regardons maintenant, quel va être l'intérêt de cette proportionnalité ? Définissons notre paragraphe, commençons par le définir en dur. Donc un font-size de 10 pixels. On aurait pas besoin de le définir, car il est déjà défini à cet endroit-là. Une marge de 100 pixels, un padding de 10 pixels, une bordure de 1 pixel pour pouvoir mieux ressentir l'effet de ce padding à l'intérieur donc on met une bordure, comme ça on va pouvoir le voir. J'enregistre. SI j'actualise ma page, on voit que cet élément-là se positionne 100 pixels de marge tout autour, 10 pixels d'espacement entre la bordure et l'écriture, le bloc de contenu, donc tout est parfait. Passons maintenant, en proportionnel. Je vais récupérer le même algorithme, sauf qu'au lieu d'utiliser du pixel, je vais utiliser du em. Là où il y a 10 pixels, je mets 1 em. Là où il y a 100, je vais rester en 100 pixels pour la marge de façon à ce que ce coin supérieur gauche et ce coin supérieur droit ne bougent pas. Vous le verrez par la suite. Par contre ici j'ai un padding d'un em et bien sûr un border de 0,1 em. Je suis bien en fraction de 10 sur mon élément. J'enregistre et j'actualise : rien ne se passe. C'est fabuleux. Quel est l'intérêt ? En fait on pourrait dire qu'un kilo de plume vaut 1 kilo de plomb donc 1em qui vaut 10 pixels ou 10 pixels qui vaut 1 em, c'est pareil. On n'a pas du tout de différence entre les deux. Revenons sur le pixel quelques instants. Je supprime le proportionnel, je recharge ma page pour être cette fois-ci dans des unités 'pixel' et je vais utiliser le ctrl++ ou le ctrl+- que vous avez vu pour pouvoir augmenter. Bien entendu, dans mon zoom sur Firefox, j'ai choisi 'zoom texte seulement'. C'est ce qu'on a essayé de démontrer difficilement tout à l'heure parce qu'on n'était pas en proportionnalité au niveau des unités. Regardez, si j'augmente, on voit que mes angles supérieurs ne bougent pas, ils sont toujours à 100 pixels mon corps a augmenté alors depuis fort longtemps, les navigateurs contemporains standards ont accepté que même si la taille est définie en pixel dès que l'utilisateur fait ctrl++, ça augmente, sauf sur Internet Explorer des vieilles versions où si c'est défini en pixel, vous pouvez augmenter autant que vous voulez ça reste en pixel. Ce n'est plus le cas, mais regardez bien : mon texte a augmenté mais ma marge fait toujours 10 pixels et ma bordure, elle, fait toujours 1 pixel. Quelque part, j'ai mon texte qui s'est agrandi dans un conteneur qui lui n'a pas bougé, ça c'est étriqué, je suis de nouveau un peu engoncé dedans. Alors que si maintenant je travaille avec du proportionnel, je vais recharger ma page en initialisant Je reviens à zéro. Je vais mettre maintenant, ici, mon proportionnel. Je supprime mon fixe, ctrl+X, ctrl+S. J'actualise ma page. Ça n'a pas bougé. Par contre dès que je fais ctrl++, regardez : on voit bien que la bordure s’est augmentée. Et l’espacement qu'on a ici entre le texte s'est aéré. On préserve une certaine proportionnalité liée à la typographie. Allons maintenant explorer les deux autres unités qui sont le EX et le CH. Si un EM équivaut à la taille typographique, à la font-size en pixel du conteneur parent ou du conteneur qui vient de redéfinir la font-size le EX équivaut à peu près à la hauteur du X et le CH pour character équivaut à la largeur du 'o', ça dépend de certaines typographies. C'est un peu particulier. Pour pouvoir mettre en évidence et en comparaison ces trois unités le plus simple est d'utiliser un paragraphe ici qui présente les lettres de l'alphabet et trois divisions qui vont respectivement comme classe et contenu contenir EM, EX et CH pour chacune des valeurs. Au niveau, du reset, très important ici, on a réinitialisé les valeurs par défaut. Il n'y a plus de marge, il n'y a plus rien. Tout a été pris en main par les CSS qu'on a défini. On a utilisé une grille de 40 qui permet d'avoir un espacement de ligne tous les 100 pixels pour mieux distinguer une hauteur de 100 pour chacune des écritures. Ces hauteurs de 100 sont liées tout simplement en disant qu'on va utiliser un font-size de 100 pixels et une ligne interlignage de 100 pixels. Donc 1 em vaut 100 pixels. Ici, si j'utilise dans la classe EM une hauteur de 100 pixels, je sais que ma hauteur EM va faire 100 pixels et j'ai une couleur verte qui va pouvoir être représentée par cette grosse hauteur ici. Petite astuce, les trois divisions qui contiennent les trois conteneurs EM, EX et CH sont elles positionnées en absolu à 300 de haut et à 10 de gauche. Je viens toutes les positionner les unes sur les autres à cet endroit-là. On peut comparer leurs hauteurs. Pour mieux les distinguer, un border bottom de 2 pixels dotted (pointillé) a été ajouté à chacune dans la même couleur que la couleur d'écriture. C'est pour ça, que le pointillé vert ici en bas, qualifie le EM, le pointillé mauve qualifie la hauteur du EX, et le pointillé rouge la hauteur du CH. Sur une typo par défaut, puisque là aucune typo n'a été définie, on ne s'en aperçoit pas, ce n'est pas du tout gênant. Si par contre je passe sur une font de type Verdana, souvent rencontrée sur le web car c'est une des typo libres qu'on avait, que tous les navigateurs pouvaient posséder. Regardez ici ça change un peu et vous voyez que le CH est un peu plus important. Ça va nous permettre d'ajuster des fois certaines hauteurs, ou règles typographiques si vous voulez jouer avec la typo, vous pouvez y aller et ces unités vont nous permettre de pouvoir garder une proportionnalité en fonction de la font qu'on va utiliser. Si par contre on utilise une font un peu farfelue comme la Condiment., une Google font avec un empattement de script assez important, ici regardez. On va dire que si je prends la Condiment j'enregistre et j'actualise. Vous voyez, la Condiment, elle, elle a vraiment des valeurs en EX qui est très étroite, très étriquée, en CH qui est un peu plus large que la moyenne, plus que la moitié de 1 EM, 1EM qui reste 1 EM. Et les ascendantes et les descendantes sortent de l'interlignage 100% que l'on a donné, bien entendu. parce que l'interlignage à 100 pixels est trop gênant. Ce qu'il nous faudrait, c'est pouvoir dire que sur mon paragraphe, on va prendre un line-height de 1,5. 1,5 ça veut dire 1,5 coefficient de l'unité utilisée. Donc ça sera 150 pixels dans ce cas-là. Vous voyez que là, mon line-height va permettre d'englober les ascendantes et les descendantes mais n'intervient nullement sur les valeurs de mon EX et de mon CH qui eux restent proportionnels à la typo et non pas à l'interlignage de cette typo. Voilà, donc trois propriétés proportionnelles de taille, l'EM, l'EX et le CH qui peuvent nous être parfois utiles pour avoir des ajustements en fonction de la typo choisie.

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 !