CSS IS AWESOME

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 :

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 :

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; */
}

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; */
}

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;
}

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;
}

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;
}

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éfinies 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.

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 ! 😊