alexis.lahouze.org/content/blog/2026/03/18/terminal.md

date, draft, author, title, linkTitle, tags

date	draft	author	title	linkTitle	tags
2026-03-18T22:49:00+0100	false	Alexis Lahouze	Terminal	terminal	général css

Je joue un peu plus avec HTML et CSS.

Comme vous pouvez le voir, j'ai mis un menu sous la forme de la commande ls.

Je pense que c'est perfectible, du moins dans le HTML généré, et le CSS associé, mais je trouve que le rendu est déjà pas si mal.

J'ai, normalement, mis les balises ARIA qui vont bien, mais je peux m'être trompé, faut voir. Pour m'aider, j'ai utilisé un plugin Firefox ARIA DevTools.

D'un point de vue code, j'ai généré une liste ul, en gros :

<ul class="lsresult">
  <li>
    <span aria-hidden="true">drwxr-xr-x</span>
    <span aria-hidden="true" style="text-align: right">1</span>
    <span aria-hidden="true">alexis</span>
    <span aria-hidden="true">alexis</span>
    <span aria-hidden="true" style="text-align: right">4096</span>
    <span aria-hidden="true" style="text-align: right">18</span>
    <span aria-hidden="true">Mar</span>
    <span aria-hidden="true" style="text-align: right">22:48</span>
    <span><a class="" href="/blog/2026/03/18/" title="18 Mars 2026">.</a></span>
  </li>
  <li>
    <span aria-hidden="true">drwxr-xr-x</span>
    <span aria-hidden="true" style="text-align: right">2</span>
    <span aria-hidden="true">alexis</span>
    <span aria-hidden="true">alexis</span>
    <span aria-hidden="true" style="text-align: right">4096</span>
    <span aria-hidden="true" style="text-align: right">11</span>
    <span aria-hidden="true">Mar</span>
    <span aria-hidden="true" style="text-align: right">02:07</span>
    <span><a class="" href="/blog/2026/03/" title="Mars 2026">..</a></span>
  </li>
</ul>

Et en CSS :

ul.lsresult {
  padding: 0;
  display: table;

  li {
    display: table-row;
  }

  li span {
    display: table-cell;
  }

  li span:not(:first-child) {
    padding-left: 1ch;
  }
}

C'est probablement perfectible, notamment en donnant le style file ou directory en fonction du type de page, directement à la balise <li>, et gérer l'affichage des privilèges directement dans la CSS. Pareil pour l'alignement à droite, je pourrais mettre plutôt une classe et gérer ça dans la CSS.

Aussi, l'idée, c'est que la liste se comporte comme un tableau, pour que les champs soient alignés. Entre chaque colonne, on met au moins un caractère de séparation (le padding-left: 1ch), je ne peux pas utiliser border-spacing car ça me rajoute un espace en début de ligne aussi).

Dans les modifications que j'ai apportées, aussi, j'ai limité la largeur du texte à 80 colonnes, terminal oblige.

Je pense qu'il faut que j'améliore les couleurs, parce ça n'est pas très lisible, et plutôt monotone, là, mais je verrai ça plus tard.

Il va falloir que je remplisse la page d'accueil, aussi, à un moment, parce que bon, c'est vide, et sauf ceux qui me connaissent déjà, vous ne pourrais pas me contacter.

À très bientôt !