Ajouter des notes de bas de page élégantes et sémantiques

Je vous ai déjà fait un petit tutoriel pour créer des notes de bas de page (footnotes en anglais) juste en utilisant CSS.

Voici maintenant une autre manière de créer vos notes de bas de page, en HTML sémantique, CSS et vanilla JavaScript.

Des notes de bas de page sémantiques

Pour commencer, nous allons utiliser les balises HTML details et summary, qui sont trop peu souvent utilisées. Elles sont pourtant idéales pour ce que nous souhaitons accomplir: montrer un contenu après un clic, mais qui doit rester caché le reste du temps.

Le gros avantage de cette nouvelle version d’inclure des liens et du HTML dans la note de bas de page, ce qui n’était pas possible avec la version en CSS pur.

Un clic sur le numéro de la note ouvre la note. Il suffit de cliquer sur l’encart jaune de la note pour la fermer, ou alors cliquer sur un autre numéro de note.

Exemple de notes de bas de page

Code HTML

Voici notre code HTML de base:

<div class="fake-p">
  Le dernier serveur de SkyMinds s'appelle Apollo<details>
    <summary>1</summary>
    <div class="details-content">Il a été mis en service le 1er octobre 2023.</div>
  </details> et tourne sous Ubuntu Server.
</div>

<div class="fake-p">
  Il est facile de changer le MOTD<details>
    <summary>2</summary>
    <div class="details-content">Cela est même recommandé car cela permet d'identifier le serveur rapidement et de ne pas se tromper de terminal lorsque l'on entre une commande.</div>
  </details> et apporter de nouvelles informations aux utilisateurs SSH.
</div>

<div class="fake-p">
  Mon mémoire professionnel a été publié récemment <details>
    <summary>3</summary>
    <div class="details-content"><span itemscope="" itemtype="http://schema.org/ScholarlyArticle"><span itemprop="citation"><span itemprop="author" itemscope="" itemtype="http://schema.org/Person"><span itemprop="name"><span itemprop="familyName">Biscay</span><span>, </span><span itemprop="givenName">Matt</span></span></span> <q><cite itemprop="headline">Créer et soutenir la motivation des élèves du cycle central en classe d’Anglais</cite></q> <span>(</span><time itemprop="datePublished" datetime="2006">2006</time><span>)</span> <span itemprop="publisher" itemscope="" itemtype="http://schema.org/Organization"><span itemprop="name">Institut Universitaire de Formation des Maîtres (IUFM)</span></span><span>.</span> Mémoire: <a itemprop="url" href="https://www.skyminds.net/creer-soutenir-motivation-des-eleves/">Créer et soutenir la motivation des élèves</a></span></span></div>
  </details>, ce que j'aurai dû faire bien plus tôt.
</div>Code language: HTML, XML (xml)

Code CSS

Voici le code CSS qui permet de créer le numéro des footnotes ainsi que le style (encart jaune avec un effet d’ombre en bas au centre de la page):

<style>
details,
summary {
  display: inline;
  vertical-align: super;
  font-size: 0.75rem;
  padding: 0 0.25rem;
}
summary {
  cursor: pointer;
  background:yellow
}
.details-content {
  position: fixed;
  bottom: 18%;
  left: 50%;
  transform: translateX(-50%);
  max-width: 90%;
  padding: 1rem;
  font-size: 1rem;
  background: lightyellow;
  box-shadow: 0 0 100px black;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  z-index:10;
}

/* Details don't like being inside a p */
.fake-p {
  margin: 0 0 1rem 0;
}

body {
  font: 100%/1.4 system-ui;
  margin: 0;
  padding: 2rem 2rem 20rem 2rem;
}
</style>Code language: HTML, XML (xml)

Code Vanilla JavaScript

Et voici enfin notre code vanilla JS qui permet d’ouvrir la bonne note de fin de page lorsque l’on clique sur le numéro de note associé:

<script>
document.querySelectorAll("details").forEach((targetDetail, i, allDetails) => {
targetDetail.onclick = () => { ...allDetails].forEach(detail => detail.removeAttribute("open")); }
});
</script>Code language: HTML, XML (xml)

Vous pouvez refermer la note qui est ouverte en recliquant dessus, elle se fermera automatiquement.

Conclusion

Et voilà, simple et efficace, avec un chargement de ressources complètement minimal. Il suffit de cliquer sur la note de bas de page pour la fermer.