Il y a maintenant 16 ans, j’ai créé ces 11 gabarits de mise en page pour la formation Elephorm Apprendre XHTML et CSS. Ils correspondent aux types de mise en page de site web courants à l’époque, compatibles avec Internet Explorer 6. Ils utilisent principalement float et position: absolute, et ne sont pas responsive.

Pourquoi une mise à jour

Depuis, j’ai reçu une moyenne de un (one, uno) courriel par an demandant si une mise à jour utilisant des styles CSS plus modernes était prévue.

L’intérêt d’une mise à jour ne me semblait pas évident, car le design de ces gabarits correspond aux tendances du milieu des années 2000, assez éloignées des mises en page courantes dans les années 2010 et au-delà. Je répondais donc cordialement: cherchez ailleurs.

Cependant, un énième courriel annuel piqua ma curiosité. À quoi pourrait ressembler une mise à jour technique, avec les outils de 2024 et ces designs de 2008? Je me suis alors embarquée dans une réécriture complète.

Le résultat est désormais visible à côté de la version de 2008, conservée comme archive.

Comme pour la version de 2008, les feuilles de styles sont abondamment commentées pour expliquer les techniques de mise en page utilisées.

Différences avec la version de 2008

  • Les couleurs de texte et de fond sont définies dans des variables CSS.

  • Les styles sont responsive et écrits avec une logique mobile first: on commence par définir la mise en page la plus simple avec les blocs les uns sous les autres (en général adaptée à l’affichage sur petit écran), et on utilise des Media Queries pour définir des surcharges de styles pour les écrans plus larges.

  • Dans quelques cas, j’ai aussi utilisé des Container Queries, afin d’éviter d’avoir à dupliquer des valeurs précises entre différentes Media Queries.

  • La plupart des mises en page sont réalisées avec les grilles CSS (display: grid). Ici, comme les principaux conteneurs sont connus à l’avance, j’ai aussi largement utilisé grid-template-areas.

  • Au lieu de doubler le body avec un conteneur <div id="global">…</div>, l’élément body est utilisé directement pour la mise en page de ses enfants.

  • Le cas de figure “conteneur sur toute la hauteur du viewport” peut être géré simplement avec min-height: 100dvh.

  • Le cas de figure “colonnes de même hauteur” était problématique en 2008. On utilisait des effets de trompe-l’oeil avec une image de fond sur un conteneur, répétée en hauteur, pour dessiner les couleurs de fond des colonnes. Ce n’est plus un problème avec les grilles CSS, avec Flexbox, ou même avec display: table (que j’ai souvent utilisé à l’époque d’Internet Explorer 8).