Nouvel article en ligne đŸ”„ : Comprendre la fonction CSS clamp()

CSS IS AWESOME

Mieux comprendre le fonctionnement du CSS


Publié le 10/01/2023 dans Blog
Crédit photo - Unsplash - Bruce WarringtonCrédit photo : Unsplash - Bruce Warrington

Dans cet article nous allons nous intéresser à un des plus connus des mÚmes CSS, si ce n'est le plus connu : "CSS IS AWESOME".

Des mĂšmes sur le CSS, il y en a beaucoup, souvent pour sous-entendre que le CSS est cassĂ©, imprĂ©visible ou mĂȘme incohĂ©rent.

L'origine de ces mÚmes vient des "bizzareries" du CSS, qui sont en réalité des imcompréhensions du langage.

On trouve le CSS imprévisible car on manque de compréhension sur son fonctionnement.

Si tu ne connais pas ce mĂšme, le voici :

CSS IS AWESOME

Quand j'ai débuté le CSS et que je suis tombé sur ce mÚme, j'ai tout de suite approuvé le message ironique.

Je me suis dis quelque chose comme :

"Bah voila, il n'y a pas que moi qui galĂšre et qui trouve que le CSS est un langage complĂ©tement pĂ©tĂ© đŸ€Ż".

Pendant longtemps j'ai gardĂ© en tĂȘte que le CSS est un langage mal conçu, et qu'il faut faire avec.

Ce qui est intĂ©rĂ©ssant avec ce mĂšme, c'est que le comportement que l'on voit avec le texte qui dĂ©borde, est un comportement tout Ă  fait normal et appropriĂ©. Donc le message derriĂšre ce mĂšme n'est peut-ĂȘtre pas si ironique que ça..

DĂ©jĂ  pour commencer on pourrait essayer de reproduire ce comportement.

Le HTML est trĂšs simple, une simple div fait l'affaire :

<div class="awesome">CSS IS AWESOME</div>

J'ajoute du CSS pour donner une largeur et une hauteur fixe Ă  ma div :

.awesome {
  width: 238px;
  height: 238px;
  border: solid 7px black;
  color: black;
  font-size: 47pt;
  padding: 10px 17px;
  font-family: arial, sans-serif;
  font-weight: 600;
  line-height: 105%;
  box-sizing: border-box;
}

Ce qui est intéressant ici, c'est de voir que j'ai donné au navigateur une information précise : une largeur fixe (une hauteur fixe également).

Le navigateur va respecter cette instruction et va donner une largeur fixe Ă  la div. Jusqu'ici tout est normal.

Sauf que le texte est trop gros pour rentrer dans la div, et que fait le navigateur ? Il fait déborder le texte :

CSS IS AWESOME

Pourquoi ce comportement ? Car par défaut les éléments HTML sont en overflow: visible. Ce qui veut dire que par défaut, le contenu qui déborde restera visible.

Et c'est une bonne chose.

Mais ce n'est pas forcément le comportement que l'on attend et on pourrait avoir envie d'une autre mise en forme.

Ne pas préciser de largeur et de hauteur

On pourrait avoir envie que la largeur s'adapte à la taille du texte, il suffirait simplement d'enlever la largeur, mais aussi la hauteur, il n'est pas toujours nécessaire de donner des instructions précises au navigateur, il est possible de le laisser choisir les dimensions, c'est d'ailleurs un de ses rÎles mais on en parlera un peu plus loin dans l'article.

.awesome {
  /* width: 238px; */
  /* height: 238px; */
}
CSS IS AWESOME

Si on veut que la largeur ne dépasse pas la longueur du mot le plus long, on peut mettre une width: min-content. Là aussi on ne donne pas une instruction précise au navigateur, c'est ce dernier qui donne une largeur à la div.

.awesome {
  width: min-content;
  /* height: 238px; */
}
CSS IS AWESOME

Ces deux solutions sont intéressantes car à aucun moment on ne précise une largeur, c'est le navigateur qui va choisir quelle largeur en pixel donner à la div.

Donner une largeur fixe, mais préciser comment le contenu doit se comporter

Si on souhaite que notre div garde sa largeur fixe et que le texte ne dépasse pas, il y a là aussi plusieurs possibilités.

Il est possible de mettre un overflow: hidden pour cacher le contenu qui dépasse. Attention car on cache volontairement du contenu à l'utilisateur.

.awesome {
  width: 238px;
  overflow: hidden;
}
CSS IS AWESOME

Si on souhaite en plus tronquer le texte, c'est possible avec un text-overflow: ellipsis mais là aussi on cache du contenu. L'ellipse est affichée à l'intérieur de la boßte de contenu (box model) et réduit donc la quantité de texte affichée.

.awesome {
  width: 238px;
  text-overflow: ellipsis;
  overflow: hidden;
}
CSS IS AWESOME

Si on souhaite cacher le contenu qui dépasse mais le rendre accessible par le scroll, on peut mettre un overflow: auto ou overflow: scroll pour ajouter une scrollbar.

.awesome {
  width: 238px;
  overflow: auto;
}
CSS IS AWESOME

Comment ça se passe ailleurs ?

Ce qui est intéréssant c'est de voir ce type de comportement ailleurs, par exemple j'ai fait le test sur PhotoShop et InDesign et le texte qui ne rentre pas dans la zone définie est.. masqué.

J'imagine que c'est un comportement souhaité, car si l'utilisateur veut que son texte soit visible, il lui suffit d'aggrandir la zone.

Dans un navigateur c'est différent, un comportement comme celui-ci ne serait pas adapté pour une bonne raison : quand on écrit du CSS, nous ne savons pas toujours comment sera le rendu.

MĂȘme si on reste responsable du rĂ©sultat, nous n'avons pas un contrĂŽle total sur le rendu et nous ne pouvons pas savoir parfaitement comment notre contenu sera affichĂ©.

C'est pour cette raison que le CSS doit s'adapter pour que le contenu reste visible.

Pourquoi le CSS s'adapte, et pourquoi nous n'avons pas le contrĂŽle ?

Le CSS est lĂ  pour s'adapter, quand on Ă©crit du CSS, on Ă©crit du code pour une infinitĂ© de possibilitĂ©s, pas comme dans le domaine de l'impression oĂč l'on connait les largeurs et hauteurs du document que l'on doit imprimer.

"D'accord, mais on pourrait vouloir garder le contrÎle en définissant des largeurs et hauteurs fixes mais en réduisant la taille du texte pour qu'il ne déborde pas ?"

Oui, tu peux vouloir garder le contrÎle et mettre des largeurs et hauteurs fixes à tes éléments, mais tu dois accepter que l'utilisateur peut changer la taille du texte via ses préférences navigateur, et le faire déborder.

C'est pour cette raison que par défaut le contenu qui déborde reste visible.

Fixer les largeurs et les hauteurs peut ĂȘtre utile parfois, mais la plupart du temps ce n'est pas une bonne idĂ©e, on voit beaucoup de dĂ©butants essayer de fixer des hauteurs et largeurs, pour garder le contrĂŽle sur leur intĂ©gration.

Mon avis sur la question : essayer au maximum de laisser les largeurs et hauteurs ĂȘtre dĂ©finis par le contenu.

Le fonctionnement du CSS

Cette analyse nous donne l'occasion d'en apprendre un peu plus sur le fonctionnement du CSS.

Le CSS est une langage implicite, récemment j'ai compris cela avec cette citation :

"When we write CSS, we don't tell the browser exactly how to render a page. Instead, we describe the rules for our HTML document one by one and let browsers handle the rendering."

Si on traduit cela donne : "Quand on écrit du CSS, on ne dit pas exactement au navigateur comment faire le rendu d'une page, à la place, on décrit les rÚgles pour notre document HTML une par une et on laisse les navigateurs gÚrer le rendu."

J'avoue que je n'ai pas compris de suite cette phrase, au dĂ©but j'ai pensĂ© que l'auteur de la citation faisait rĂ©fĂ©rence aux feuilles de style intĂ©grĂ©es aux navigateur (user agent stylesheet) et aux diffĂ©rentes maniĂšres de faire les rendus des diffĂ©rents navigateurs (une page Web affichĂ©e sur Google Chrome sur Windows n'aura pas le mĂȘme rendu que sur Safari sur MacOS).

En fait la citation fait référence à autre chose.

Parfois avec une seule rĂšgle CSS le navigateur va faire beaucoup de choses.

Un exemple : si je mets un display: flex sur un élément, le CSS va déclarer plusieurs propriétés avec leurs valeurs par défaut, comme flex-direction: row.

Le navigateur va également attribuer une largeur et hauteur aux éléments enfants du Flex Container, alors que je n'ai jamais défini de largeur et hauteur.

Je décris, et le navigateur fait le rendu.

On peut retrouver ce comportement avec d'autres valeurs comme min-content que l'on a vu plus haut, et qui ne correspond pas à une valeur en pixel quand on l'écrit, pourtant le navigateur va en définir une au moment du rendu.

C'est pour cela que l'on dit que c'est le navigateur qui fait le rendu, et qu'en tant que développeur, on lui donne seulement des instructions.

Globalement ce qu'on peut retenir de ce mÚme est que le CSS est un langage qui s'adapte, pour garder le contenu visible, c'est un langage implicite avec beaucoup d'abstractions, c'est pour cela qu'il n'est pas toujours nécessaire de préciser des largeurs ou hauteurs. On peut laisser le navigateur le faire pour nous lors du rendu.

Il y a beaucoup de chose à dire sur le CSS, si ce genre d'article te plait n'hésites pas à me le faire savoir ! J'espÚre que tu comprends un peu mieux le CSS désormais !

Pense Ă©galement Ă  t'abonner Ă  la newsletter via le formulaire juste en-dessous, tu peux aussi partager cet article pour soutenir mon travail ! 😊

2023 - SĂ©bastien Imbert