Mise en page avec CSS

Les débuts de la mise en page web

• Historiquement, la seule façon d'organiser le contenu dans la page é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

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 : run-in (pour les titres en enfilade), list-item, table et table-cell…
• Il y a également deux valeurs spéciales, display:flex et display:grid : je reviens dessus plus bas

Modifier la position d'un bloc

• Propriété position : static, relative, absolute, fixed
• static par défaut, l'élément prend sa position normale
• pour les autres valeurs, il faut 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 au premier parent qui est lui-même en position non static, et à défaut, par rapport au canevas. 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

Eléments flottants

• Propriété float : permet de faire flotter un bloc.
• Le bloc qui flotte sort du flux normal des blocs (comme pour position:absolute), et il est repositionné tout à droite ou tout à gauche de son parent en repoussant les éléments inline
• Conçu pour que du texte puisse contourner les images
• 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'éteint 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
• Reste une valeur sûre si on veut maximiser la compatibilité avec de vieux navigateurs
• 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.

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 verra 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