L'évolution du CSS

Une histoire du layout

Le layout CSS a connu une évolution spectaculaire. Ce qui a commencé comme un simple langage de style est devenu un système de mise en page puissant. Chaque ère a résolu des problèmes tout en en créant de nouveaux.

  Chronologie du layout CSS
  ──────────────────────────────
  1996  CSS1 — styles de base
  1998  CSS2 — positionnement, floats
  2000s Layouts en tables partout
  2010s Frameworks basés sur les floats
  2012  Spécification Flexbox
  2017  Spécification CSS Grid
  2020s Container queries, :has(), layers
  ──────────────────────────────

L'ère des tables (1996–2005)

Avant que le CSS ait des outils de layout, les développeurs utilisaient les éléments HTML <table> pour créer des mises en page. Les tables étaient conçues pour les données tabulaires, mais elles étaient le seul moyen fiable de créer des layouts multi-colonnes.

  Problèmes des layouts en tables :
  ──────────────────────────────
  ✗ Sémantiquement incorrect
  ✗ Inaccessible aux lecteurs d'écran
  ✗ Rigide, difficile à rendre responsive
  ✗ HTML profondément imbriqué
  ✗ Mélange structure et présentation
  ──────────────────────────────

L'ère des floats (2005–2015)

La propriété CSS float était conçue pour le texte autour des images, mais les développeurs l'ont détournée pour les layouts. Ça fonctionnait mais nécessitait des hacks comme le clearfix et des calculs fragiles.

  Problèmes des layouts en floats :
  ──────────────────────────────
  ✗ Hacks clearfix nécessaires
  ✗ Pas de centrage vertical
  ✗ Hauteurs de colonnes inégales
  ✗ Calculs de pourcentages fragiles
  ──────────────────────────────

  L'ère du "ajoute un clearfix" et
  "pourquoi mon layout est cassé ?"

Flexbox & Grid (2015–présent)

Flexbox (2012) et CSS Grid (2017) ont été les premières fonctionnalités CSS conçues spécifiquement pour le layout. Elles ont résolu des décennies de frustrations.

  Ce que Flexbox & Grid ont résolu :
  ──────────────────────────────
  ✓ Centrage vertical (enfin !)
  ✓ Colonnes de hauteur égale
  ✓ Réordonner sans changer le HTML
  ✓ Distribution d'espace (gap)
  ✓ Layouts bidimensionnels (Grid)
  ✓ Zones de grille nommées
  ✓ Plus besoin de clearfix
  ──────────────────────────────

CSS moderne (2020s)

Le CSS continue d'évoluer rapidement. Les ajouts récents le rendent plus puissant que jamais, réduisant le besoin de JavaScript et de préprocesseurs.

  Fonctionnalités CSS modernes :
  ──────────────────────────────
  Container queries  — styler selon la taille du parent
  :has()             — sélecteur parent (enfin !)
  CSS Nesting        — imbrication native sans Sass
  @layer             — contrôle explicite de la cascade
  Variables CSS      — thèmes dynamiques
  subgrid            — alignement des grilles imbriquées
  oklch()            — couleurs perceptuellement uniformes
  view-transitions   — animations de transition de page
  ──────────────────────────────

Résumé