Cuisine et Web

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 layout (structures visuelles) autrement compliquées ou impossible avec d'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.

<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;
}

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

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

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.