Dans cet article on va parler d'une approche du CSS imaginée par Ahmad Shadeed : le CSS "défensif" ou "Defensive CSS".
L'idée derrière ce terme est d'anticiper le comportement des layouts/composants pour qu'ils se comportent bien en toutes circonstances.
Avant d'aller plus loin je pense qu'il est important que je mette en avant le travail de Ahmad Shadeed, car il n'a pas seulement imaginé le terme "CSS défensif", il a également fourni un travail important sur ce sujet avec des articles, des vidéos conférences et même un site entier dédié au CSS défensif.
Voici donc quelques liens, j'en mettrais davantage en fin d'article :
- le compte Twitter de Ahmad
- le blog de Ahmad Shadeed
- le site qu'il a dédié au CSS défensif
Comprendre le concept de CSS défensif
Pour comprendre le concept derrière le terme "CSS défensif", je vais prendre un exemple très simple : celui d'une image, avec un texte en blanc par-dessus.
Si l'image ne se charge pas, est-ce que le texte sera lisible ?
La réponse est non ⤵️
Pour éviter cela, il suffit de mettre une couleur de fond à l'image comme ceci :
img {
background-color: #424C56;
}
Comme ça, en cas de problème de chargement de notre image, le texte restera parfaitement lisible ⤵️
En faisant cela on a en quelque sorte "armé" notre CSS pour que notre design s'adapte à cet imprévu !
L'exemple est très simple mais c'est pour que tu comprennes, on verra deux autres exemples un peu plus loin dans l'article.
Ce qu'explique Ahmad dans ses conférences sur le sujet est que l'apparition (ou l'absence) inattendue de contenu peut casser un design.
Il dit aussi qu'il y a une différence entre le "design parfait" imaginé par un webdesigner et la réalité.
Dans un design parfait, les titres des cards sont tous sur deux lignes et le titre en font-size: 56px de la page ne fait pas plus de 6 mots.
Dans la réalité c'est différent, c'est pour cela qu'il faut anticiper.
Tout part du "et si.."
- "Et si le texte de mon bouton est trop long, ou trop court ?"
- "Et si le client ne respecte pas les dimensions des images ?"
- "Et si le titre de mes cards est plus long que prévu ?"
Un peu comme en programmation avec des conditions et l'écriture de tests.
Il n'y a pas forcément cette culture du test chez les intégrateurs et les webdesigners, mais je pense que c'est important de la développer, car si on fait du CSS défensif (ou webdesign défensif ça marche aussi), on peut prévenir beaucoup de bugs visuels, qui peuvent dégrader l'UI, mais aussi l'UX si cela bloque l'utilisateur dans son utilisation d'une page Web.
Un autre exemple : le contenu trop long
Voyons ensemble un autre "problème" que le CSS défensif peut nous aider à résoudre : le contenu trop long.
Imaginons que nous devons intégrer deux maquettes : une liste de noms d'utilisateurs et une card article.
Commençons par le composant liste de noms ⤵️
Sur la capture ci-dessus, le composant liste comporte des noms avec des longueurs standard, ni trop long, ni trop court, parfait donc ! 👌
Mais un peu plus tard, on nous demande de changer le deuxième nom de la liste par un certain "Jean-Michel de Van der Broken", un nom pas très commun, en plus d'être plutôt long ⤵️
Résultat on a un retour à la ligne sur le nom, mais nous avons bien prévu les choses parce que nous avons fait en sorte que le texte reste centré avec l'avatar.
Avec un display: flex et align-items: center sur la div qui englobe l'avatar et le texte.
C'est bien mais pas suffisant pour le webdesigner qui préfèrerait que le texte reste sur une seule ligne.
On peut régler cela très facilement avec quelques lignes de CSS :
.username {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
Pas besoin d'attendre d'avoir un nom trop long pour ajouter ces lignes de CSS, on peut le faire par anticipation.
Voici le résultat ⤵️
On peut voir que cela n'affecte pas les noms qui sont plus courts.
Un autre exemple avec une card qui contient un titre d'abord court, puis qui change et devient plus long ⤵️
Le problème ici, c'est qu'il n'y a pas d'espace entre le titre et le pictogramme.
On peut là aussi anticiper les choses en mettant sur le titre, et même si ce dernier est court, un margin-right.
.card-title {
margin-right: 1rem;
}
Si le titre devient plus long que prévu, le texte ne sera jamais collé au pictogramme ⤵️
Le CSS défensif c'est de l'anticipation
On l'a vu avec les exemples précédents, le CSS défensif consiste à anticiper des bugs/problèmes visuels en imaginant ce qui pourrait arriver si on change quelque chose comme la longueur d'un texte.
Ahmad Shadeed propose des solutions sur son site consacré au CSS défensif
Au moment où j'écris ces lignes, Ahmad a regroupé 25 astuces pour rendre ton CSS défensif.
Beaucoup de solutions sont à base de CSS moderne comme Flexbox ou Grid.
Je suis certains que tu découvriras des astuces que tu ne connais pas encore. Certaines astuces comme celles sur les scrollbar sont vraiment à connaître.
À qui s'adresse le CSS défensif ?
Ahmad explique dans ses articles et conférences que le CSS défensif n'est pas que pour les intégrateurs et développeurs front-end.
On peut également parler de design défensif pour les webdesigners.
Pour finir, on peut dire qu'il faut voir le CSS défensif comme une "stratégie" de design et d'intégration pour anticiper et prévenir le maximum de problèmes de design.
Quelques liens pour aller plus loin
Si le sujet t'intéresse voici des liens vers les différents articles que j'ai lu et conférences que j'ai visionné pour préparer cet article :
- introduction au CSS défensif
- l'article original de 2021 (celui du site defensivecss.dev est plus complet car plus récent)
- le compte Twitter d'Ahmad Shadeed
- le compte Twitter de DefensiveCSS
- une conférence en ligne de Ahmad Shadeed sur le sujet
