---
date: "2026-03-18T22:49:00+0100"
draft: false
author: Alexis Lahouze
title: "Terminal"
linkTitle: "terminal"
tags:
  - général
  - css
---
Je joue un peu plus avec HTML et CSS.

<!--more-->

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](https://github.com/ziolko/aria-devtools).

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

```html
<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 :

```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 !

<!-- vim: set tw=80 ts=2 sw=2 sts=2 spelllang=fr:-->