CSS : l'art de rendre le web présentable (et de centrer un div)
Ou : Trente ans d’évolution pour enfin pouvoir centrer un élément verticalement sans hack
Le HTML structure le contenu. Le CSS — Cascading Style Sheets — le rend présentable. Couleurs, polices, marges, mise en page, animations, responsive design. Tout ce qui fait qu’une page web ressemble à autre chose qu’un document texte brut.
C’est un langage déclaratif : vous décrivez ce que vous voulez (« ce paragraphe doit être en rouge, avec une marge de 20 pixels ») et le navigateur se débrouille pour l’afficher. En théorie. En pratique, la façon dont le navigateur « se débrouille » est une source inépuisable de surprises et de frustration.
Flexbox, Grid et la fin des layouts impossibles
Le modèle de boîte : la base de tout
Chaque élément HTML est une boîte. Cette boîte a un contenu, un padding (espace intérieur), une bordure, et une marge (espace extérieur). Comprendre le modèle de boîte, c’est comprendre 80% des bugs CSS.
Le piège classique : width: 100% ne fait pas ce que vous croyez. Un élément avec width: 100%, padding: 20px et border: 1px solid déborde de son conteneur — parce que la largeur par défaut ne compte que le contenu, pas le padding ni la bordure. La propriété box-sizing: border-box résout ça, et c’est la première ligne que tout développeur met dans son reset CSS.
Flexbox et Grid : les outils modernes
Avant Flexbox (2012) et Grid (2017), la mise en page CSS était un exercice de contorsion. On utilisait des float, des display: table, des position: absolute — des hacks qui faisaient le travail mais rendaient le code incompréhensible.
Flexbox — pour les mises en page unidimensionnelles (une ligne ou une colonne). Aligner des éléments, les espacer uniformément, les centrer — tout ce qui était pénible est devenu trivial. display: flex; justify-content: center; align-items: center; — centrage vertical et horizontal en trois lignes.
Grid — pour les mises en page bidimensionnelles (lignes et colonnes). Créer une grille complexe avec des zones nommées, du responsive intégré, et des alignements précis. Ce qui nécessitait un framework CSS entier (Bootstrap) se fait maintenant en CSS natif.
Le responsive : une page, mille écrans
Les media queries permettent d’appliquer des styles différents selon la taille de l’écran. L’approche mobile-first — commencer par le mobile et ajouter des styles pour les écrans plus grands — est devenue le standard, parce que plus de la moitié du trafic web vient des mobiles.
Le dialogue du pixel parfait
DevOps Dave : Le designer veut que le bouton fasse exactement 42 pixels de haut.
Security Sarah : Sur quel écran ?
DevOps Dave : Tous.
Security Sarah : 42 pixels sur un écran retina de 3x, c’est 14 pixels logiques. Sur un écran 1x, c’est 42 pixels. Le pixel parfait n’existe pas sur le web — utilise des unités relatives (rem, em, %) et accepte que le résultat varie légèrement.
Tableau récapitulatif
| Concept | En une phrase |
|---|---|
| CSS | Langage qui contrôle l’apparence de toutes les pages web. |
| Modèle de boîte | Contenu + padding + bordure + marge — la structure de tout élément. |
| Flexbox | Mise en page unidimensionnelle (alignement, espacement, centrage). |
| Grid | Mise en page bidimensionnelle (lignes et colonnes). |
| Media query | Appliquer des styles différents selon la taille de l’écran. |
| Mobile-first | Concevoir d’abord pour mobile, puis enrichir pour les grands écrans. |
Le mot de la fin
Le CSS est le langage que tout le monde utilise et que personne ne maîtrise complètement. Mais les outils modernes — Flexbox, Grid, les variables CSS, les container queries — ont rendu le langage incomparablement plus puissant et plus logique qu’il ne l’était il y a dix ans. Et oui, on peut enfin centrer un div.