Mise en page avec CSS

Les débuts de la mise en page web

• Avant CSS, la seule façon d'organiser le contenu dans la page, et notamment de mettre des éléments côte-à-côte, était d'utiliser des tableaux HTML
  • abominable à maintenir et à modifier
  • très peu adaptatif
  • HTML non sémantique et très alourdi
• De nos jours il y a de nombreuses alternatives : il est très mal vu d'utiliser des tableaux pour faire de la mise en page ! Un tableau HTML est fait pour présenter des données tabulaires… et c'est tout

Flux normal

• Rappels du fonctionnement de base :
  • Le navigateur représente chaque élément comme une boîte
  • La boîte des éléments de type bloc commence sur une nouvelle ligne et prend toute la largeur disponible.
  • La boîte des éléments de type inline se comporte comme un mot dans le texte, et sa largeur dépend de son contenu.
  • Dans les deux cas, la hauteur de la boîte dépend de son contenu.
• C'était ce que faisaient les navigateurs quand CSS n'existait pas, et c'est toujours ce qu'ils font s'il n'y a pas de CSS
• De nombreuses propriétés modifient ce comportement

Eléments flottants

• Propriété float : permet de faire « flotter » un bloc, soit à droite soit à gauche.
• Introduite quasiment dès les débuts de CSS.
• Conçue pour que du texte puisse contourner les images :
  
• Fonctionnement :
  • le bloc qui flotte sort du flux normal des blocs : les autres éléments sont positionnés comme s'il n'était pas là
  • il est repositionné tout à droite ou tout à gauche de son parent en repoussant les éléments inline Exemple

Mise en page avec des flottants

• Une caractéristique fondamentale des flottants : si on met plusieurs, ils « s'empilent » horizontalement Exemple
• Cela permet de mettre des éléments en colonnes sans modifier le HTML, ce qui était impossible pendant très longtemps (inline-block n'est apparu qu'au milieu des années 2000)
• Plus flexible et plus sémantique que les tableaux HTML
• Cependant, pas conçu pour faciliter la mise en page (en particulier, pas de float:center)
• La mise en page avec des flottants est un grand classique, qui a dominé le web design pendant une quinzaine d'années, et qui s'est éteinte progressivement au fur et à mesure de la disparition des vieux navigateurs
• Pas évident à maîtriser, pas très compatible avec le responsive design… et tout simplement du bricolage
• Dans le cadre de ce cours, il est interdit d'utiliser float pour autre chose que son usage prévu, c'est-à-dire quand on veut faire flotter un élément (typiquement une image ou une figure) sur le côté d'un texte.

Modifier la position d'un bloc

• Une autre possibilité de modifier le flux normal des éléments est apparue au début des années 2000 (vérif date) : le positionnement
• Propriété position : static, relative, absolute, fixed, sticky
• static par défaut, l'élément prend sa position normale
• pour les autres valeurs, il faut généralement aussi spécifier une des propriétés top, bottom, left, right
• position relative : décalage par rapport au positionnement naturel. Tout est calculé comme si l'élément gardait sa place dans le flux, et il est décalé ensuite sans que rien d'autre ne bouge. Exemple de positionnement relatif
• position absolue : l'élément est sorti du flux, les autres éléments font comme s'il n'existait pas. La position est calculée par rapport à la bordure du premier parent qui est lui-même en position non static, et à défaut, par rapport à l'élément racine. ce n'est pas correct, c'est par rapport au bloc englobant initial. mais je ne vais pas rentrer dans les détails. la différence se voit si on utilise bottom. Démo : positionnement absolu dans la pageDémo : positionnement absolu par rapport à un parent
• position fixed : l'élément est également sorti du flux, mais il est positionné par rapport au viewport, c'est-à-dire qu'il n'est pas sensible au scroll
• On peut gérer les chevauchements avec la propriété z-index (position en profondeur) tutoriel

Le positionnement permet de faire des choses intéressantes, mais assez spécifiques.

On ne peut pas l'utiliser pour faire une simple mise en page en colonnes, par exemple : cela donne du code complexe, fragile et difficile à maintenir

On évite autant que possible de sortir les éléments du flux normal.

Propriété display

• La plupart des possibilités de mise en page sont accessibles via la propriété display
• Elle a deux valeurs basiques : block, qui est la valeur par défaut des éléments de type bloc (en général, mais pas toujours !), et inline valeur par défaut des éléments de flux
• On peut utiliser ces valeurs pour changer le comportement d'un élément :
  • avec display:block, l'élément sera considéré comme bloc : il va notamment prendre toute la largeur laissée dans le bloc parent
  • avec display:inline, l'élément sera considéré comme un élément de flux : ses marges verticales disparaissent, sa hauteur et sa largeur sont ignorées. Rarement utile
• Il y a de nombreuses autres valeurs, notamment
  • display:inline-block : mélange des deux, permet de mettre des blocs sur une ligne. Se comporte comme un inline pour la position (pas de saut de ligne), et comme un bloc pour le reste (marges, dimensions)
  • display:none : la boîte et tous ses enfants n'apparaissent pas du tout (comme s'ils n'étaient même pas dans le HTML)
  • et encore d'autres qui modifient (plus ou moins) la façon dont se comporte l'élément : list-item, table et table-cell…
• Il y a également deux valeurs spéciales, display:flex et display:grid : je reviens dessus plus bas

inline-block comme alternative aux flottants

• Quand display:inline-block est arrivé au milieu des années 2000, il a été accueilli comme une meilleure façon de faire des colonnes que float
  • plus naturel d'un certain point de vue, évite certaines surprises
  • pas de problème de clearer
• Cependant, comme float, inline-block n'est pas non plus conçu pour faire de la mise en page
• Quelques inconvénients :
  • compliqué de modifier l'ordre d'affichage
  • l'alignement vertical peut être surprenant (démo et explications complètes sur cette page de cours)
  • et surtout, display: inline-block transforme le bloc en élément inline, c'est-à-dire qu'il se comporte plus ou moins comme un mot… en particulier les espaces dans le HTML autour de l'élément se voient dans le rendu.
• Une solution répandue au dernier problème est de mettre la taille de la police à 0 dans le conteneur, et de la remettre à la taille voulue dans l'élément… mais c'est encore du bricolage !
• dans le cadre de ce cours, il n'est pas interdit d'utiliser inline-block, mais pas avec ce genre de bidouille.

Mise en page moderne

Les navigateurs modernes implémentent des spécifications plus récentes de CSS, apparues au début des années 2010, et quasiment utilisables en production aujourd'hui

Attention cependant, ça ne fonctionnera pas partout ! Mais si votre page est bien faite, au pire les navigateurs trop anciens afficheront le contenu sans mise en page… (Viser la graceful degradation !)

Les outils modernes de mise en page s'activent avec deux valeurs spéciales de display : flex ou grid

Contrairement aux autres valeurs de display, elles ne modifient pas le comportement de l'élément en question mais celui de ses enfants : en d'autres termes, elles permettent de mettre en page ce qui est à l'intérieur d'un élément.

display:flex permet d'utiliser le module « Flexbox » de CSS, qui est particulièrement utile pour mettre en page des suites d'éléments sur plusieurs lignes. On ne l'abordera pas dans ce cours.

display:grid permet d'utiliser le module « Grid Layout » de CSS, qui permet de faire de la mise en page en deux dimensions avec des grilles CSS.

On voit en TP les bases du fonctionnement des grilles CSS pour créer des colonnes et des rangées et aligner les différents éléments. Les grilles CSS sont beaucoup plus riches que ça, mais on ne peut pas tout voir !

Conclusion