Cuisine et Web

Recettes pour Cuisiniers ou Web Dev en herbes

Histoire de colonne au fil du temps (layout)

Rédigé par G.Cyrille Aucun commentaire
Classé dans : CSS, Layout, WebDev Mots clés : layout, colonne, grid, flex, float, table

Cette article va vous donner quelques exemples reprenant les vielles méthodes en comparaison sur une structure courante avec un bandeau, une colonne de navigation et le contenu à coté et un pied de page sur toute la largeur. en passant de float à grid et l'affichage en mode table.

Les années ou la création d'un affichage en colonnes devait faire preuve d'ingéniosité en utilisant float ou display :inline-block/table , remanier la structure HTML et même toucher aux positionnements sans modération aucune sont enfin révolues , enfin presque pour ce qui concerne les tableaux dans nos courriels.

La recherche de la grille parfaite n'est plus une épreuve à passer dans l'apprentissage des feuilles de styles.

Aujourd'hui, cela est devenu beaucoup simple et applicable sur une structure qui n'aura pas besoin d'être surchargée, réordonnée, ni modifiée dans la plupart des cas.

Il y a trop d'options penserez-vous, pourtant chacune a sa particularité et correspondra plus ou moins à votre usage et son contenu. Quelques exemples vous aideront à choisir entre une ou plusieurs méthode. Chacune pouvant se compléter et même s'imbriquer en vous aidant à oublier float qui en fait, a d'autres usages interessants.

Prenons un exemple classique de 2 colonnes avec un entête et un pied de page

Structure HTML5 de base pour ce layout que nous allons utilisé pour les exemples :

  <header> Header </header>
  <nav> Nav </nav>
  <main> Main </main>
  <footer> footer </footer>

Voyons les principales méthodes disponibles au fil du temps.

CSS grid

Une méthode aboutit et puissante qui permet de construire des grilles complexes avec peu de code.Il est possible de créer un pattern qui se répétera automatiquement, de créer des affichages sans positionnement absolu en plaçant plusieurs élément dans la même case (un texte sur une image, une boite à onglet, etc.).

Bref, à lui seul , grid permet de créer des autrement compliquées ou impossible avec les autres méthodes.

Reprenons notre visuel de base et voyons le peu de code nécessaire pour le reproduire

body, header,nav,main,footer {
  border: solid 1px;
  margin:2px;
}
body {
  display: grid;
  grid-template-columns:100px 1fr;
}
nav {
  grid-row:2;
  grid-column:1;
}
main {
  grid-row:2;
  grid-column:2;
}
header,footer {
  grid-column:1/3;
}

Pour ce rendu, il faut déclarer une base de 2 colonnes , ici une de 100px et l'autre occupant le reste de l'espace disponible: grid-template-columns:100px 1fr;.
Pour ajouter une colonne, il suffit d'ajouter une valeur.

À partir de là, tous les enfants seront placés dans l'une de ses 2 colonnes, l'un après l'autre.

header et footer occuperont 2 colonnes, la règle :grid-column:1/ span 2; se chargera de le faire. La premiere valeur indique le numéro de la colonne où positionner l'élement dans la grille, la seconde le nombre de colonnes à traverser (span x).

Ressource

Une introduction aux grilles CSS via grid: Grid Layout

CSS flex

Une méthode efficace qui écarte enfin les bidouilles flottantes.

Flex permet de créer des grilles simple en colonne ou en ligne, alignant les enfants sur celle-ci uniquement contrairement à grid, où les boites peuvent s’étaler au travers de plusieurs colonnes ou lignes. Flex ne gère qu'une seule direction à la fois row par défaut ou column .

Pour reproduire notre exemple de base, nous utiliseront la direction row avec flex-wrap:wrap; autorisant le passage sur une autre ligne lorsque il n'y a plus de place pour afficher l'enfant suivant

body, header,nav,main,footer {
  border: solid 1px;
  margin:2px;
  min-width:100px;
}
body {
  display: flex;
  flex-wrap:wrap;
}
main {
  flex-grow:1;
}
header,footer {
  flex-grow:1;
  min-width:95%;
}

Il n'y a là que peut de différences notables, flex ou grid semblent identiques, il y aura pourtant de grosses différences sur l'affinage et comportement possible de ce gabarit. Le choix de grid ou flex dépendra donc du comportement attendu. Ici, nav et main auront la même hauteur, le plus haut des deux étirant l'autre.

Pour flex, min-width et flex-wrap détermineront les éléments à afficher sur chaque ligne.

CSS Column

Une méthode méconnue simple et efficace hérité du mode print pour la lisibilité des textes longs ou compactes.

Les propriétés deColumn CSS n'ont pas vocation à créer la mise en page générale d'un site, hérité du print (média papier) elle à pour but de mettre en forme un texte pour qu'il soit facilement lisible.

A mon humble avis, son usage devrait se limiter à déterminer une largeur de colonne pour que la lecture d'une ligne à l'autre soit confortable et à fixer une hauteur maximale, soit en nombre de ligne soit inférieur à la hauteur de l'écran, toujours pour ce souci de lisibilité, affublé d'un text-align:justify , cela reproduira les colonnes de vos canards favoris. Le nombre de colonnes s'ajustera à la largeur disponible.

Voici un exemple reprenant une structure d'article , la règle column-span: all; n'est pas encore comprise par tous les navigateurs.

la structure de cet exemple:

<article>
   <header>titre</header>
    textes et images
   <footer>pied</footer>
</article>
article, header,p,footer {
  border: solid 1px;
  margin:2px;
  padding:0.15em;
}
article {
  column-width: 14em;
  max-height:36em ;/*environ 30 lignes */
  column-rule:double ;
  gap:0.5em;
 font-size:3vw;
}
p{
 text-align:justify;
 border:0;
 }
header,footer {
  column-span: all;
}

Vous l'aurez compris, cette règle ne s'applique qu'à des portions de texte et ne peut être utilisée pour l'agencement visuel d'une page web.

CSS table-layout

display utilisant l’algorithme d'affichage d'un tableau. Plusieurs valeurs sont disponibles, cependant les deux attributs colspan et rowspan n'ont pas d'équivalent CSS. Il faudra vous tourner vers grid ou faire l'usage d'un véritable tableau si le contenu le justifie(un calendrier, des stats,..).

Il n'y a pas non plus de valeur pour représenter un <th>, ce ne sont que des styles, utilisé un titre si cela est nécessaire. (Si vous ne comprenez pas cette phrase, cela viendra, ce n'est pas tout à fait le sujet ici)

Vous comprendrez que la structure HTML à créer sera très similaire à celle d'un tableau pour que cela fonctionne correctement.

Ci dessous un exemple avec le minimum de style et HTML pour créer notre exemple, pour cela, la structure doit être modifiée:

<body>
  <header>Header</header>
  <div class="tbody">
    <nav>Nav</nav>
    <main>Main</main>
  </div>
  <footer>footer</footer>
</body>

La feuille de styles associée à cette structure et son rendu visuel:

body, header,nav,main,footer {
  border: solid 1px;
  margin:2px;
}
.tbody {/* table-row-group evincé */
  display: table;
  width: 100%;
  border-spacing: 2px 0;
}
nav {
  width:100px;
}
.tbody > nav,
.tbody > main {
  display: table-cell;
}

les valeurs de display disponibles sont:

table-row-group
Ces éléments se comportent comme des éléments HTML <tbody>.
table-header-group
Ces éléments se comportent comme des éléments HTML <thead>.
table-footer-group
Ces éléments se comportent comme des éléments HTML <tfoot>.
table-row
Ces éléments se comportent comme des éléments HTML <tr>.
table-cell
Ces éléments se comportent comme des éléments HTML <td>.
table-column-group
Ces éléments se comportent comme des éléments HTML <colgroup>.
table-column
Ces éléments se comportent comme des éléments HTML <col>.
table-caption
Ces éléments se comportent comme des éléments HTML <caption>.

CSS float

une méthode flottante qui tangue et se retrouve aujourd'hui assignée aux usages qui lui sont dédiés.

Mise en forme avec la propriété float

La propriété float indique qu'un élément doit être retiré du flux normal et glissé sur le côté droit ou sur le côté gauche de son conteneur.

Le texte et les autres éléments en ligne (inline) pourront alors eux même glissé autour de cet élément flottant.

L'élément est retiré du flux normal de la page mais s'inscrit toujours dans le flux

Cette première méthode est relativement simple, il suffit de retirer un seul élément du flux normal de la page et de l'ancrer vers la gauche ou la droite.

body,header,nav,main,footer {
  border: solid 1px;
  margin: 2px;
}
nav {
  float: left;
  width: 100px;
}
main {
  margin-left: 156px;
}
footer {
  clear: both;
}

On perçoit déjà un défaut d'alignement au rendu visuel et cette règle dont la raison ne semble pas naturelle: margin:106px pour l’élément dessiner en deuxième colonne.

- float a des effets de bords auxquels un débutant ne s'attendra pas et qu'il faudra prendre en compte à chaque fois qu'un élément flottant sera mis en œuvre. La façon de gerer les flottant n'est pas traiter ici.

HTML table

A ne pas décrié trop vite, elle joue un rôle important comme alternative dans un E-mail ou l'implémentation des feuilles de styles est trés en retard sur les possibilités de mises en forme actuelles. Pour affiché un tableau de scores, un devis, un inventaire, ... , c'est toujours son rôle.

Au tout début(enfin presque), il y avait et il y a encore dans nos e-mails : Le tableau HTML

Voici un exemple en tableau HTML si vous souhaitez faire ce genre de structure dans un e-mail.

<table border=1 width="100%">
  <thead>
    <tr>
      <th colspan=2>Header</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td width="100px"> Aside</td>
      <td>Main</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan=2>footer</td>
    </tr>
  </tfoot>
  </table>

La balise <table> est apparu en 1994 avec "Netscape Navigator" , une année aprés les formulaires, eux, introduits en 1993 avec le "navigateur Mosaic". Avant cela, HTML (1989/1992)n'etait composé que de balises structurant la base d'un document(page web)et ses textes. La balise titre, les balises de titre(hn) , paragraph, listes et l'essentiel: les hyperliens(<a>) permettant de naviguer d'un document à l'autre.

Ce n'est qu'a partir de Mars 1995 que les standards de codage font leur apparition. En effet, chaque navigateur avait introduit ses propres règles et balises, les uns en guerre contre les autres pour être le meilleur.

Aujourd'hui, l'implémentation de HTML5 est devenue commune à tous les navigateurs, la seule guerre qui persiste est peut-être la course à l'implementation des standards de la meilleur façon.


- N.D.A: attention aux F.B.I.D.C.
float ( 1996) ou display:table (1998) ne sont pas obsolètes, CSS a été compléter avec le modèle de boite en flex (2009) et en grid (2011) sans oublier l'affichage en colonne en 1999.Quant aux tableaux, ils apparaissent avec Netscape Navigator en 1994.
Chacun reste fonctionnel et a son usage.

Laisser un message.

Quelle est le premier caractère du mot g3ntm ?