Aller au contenu

HTML⚓︎

Un gabarit minimaliste⚓︎

🐣 2022-08

Parce qu’il faut bien copier-coller une source pour démarrer .

template.html
<!doctype html><!-- (1)! -->
<html lang="fr"><!-- (2)! -->
<head>
  <meta charset="utf-8"><!-- (3)! -->
  <!-- (4)! -->
  <meta name="viewport"
        content="width=device-width,initial-scale=1"><!-- (5)! -->
  <meta name="referrer" content="origin-when-cross-origin"><!-- (6)! -->
  <title>Title</title><!-- (1)! -->
  <link rel="icon" href="data:;base64,iVBORw0KGgo="><!-- (7)! -->
  <link rel="stylesheet" href="style.css" />
  <style></style>
</head>
<body>
  <header>
    <h1>Title</h1>
  </header>
  <main>
  </main>
  <script type="module"></script>
</body>
  1. Pour en faire un document valide HTML5.
  2. Pour les lecteurs d’écran, le référencement, les extensions, etc.
  3. Doit être dans les premiers 1024 bytes, plutôt à mettre avant le <title>, référence à ce sujet.
  4. Pourquoi pas de balise meta avec une valeur X-UA-Compatible ? Voir cette réponse sur StackOverflow.
  5. Beaucoup de monde dans la balise meta relative au viewport, et nous sommes responsables de cela…
  6. Avec cette valeur, le site lié ne saura pas de quelle page provient le lien qui a été cliqué mais aura uniquement l’information du domaine. Cela me semble être un bon compromis pour préserver l’intimité des personnes.
  7. Gif transparent le plus petit qui soit, évite une requête inutile vers le serveur (et une erreur dans la console).

🤳 Capturer une image/vidéo de la webcam depuis le navigateur⚓︎

🐣 2022-09

Exploration de Austin Gil.

C’est uniquement possible sur certains navigateurs mobiles mais c’est bon à savoir.

capture.html
<input type="file" accept="image/*" capture="environment">

Styler des colonnes de tableaux⚓︎

🐣 2022-10

J’ai toujours pensé qu’il fallait le faire à la main cellule par cellule mais en fait avec colgroup/col c’est tout à fait possible et en jouant avec :target on peut même le rendre interactif :

table-columns.html
<table>
  <caption>
    Frequency and average use of heading elements.
  </caption>
  <colgroup>
    <col id="table1-heading" />
    <col id="table1-occurrences" />
    <col id="table1-average" />
  </colgroup>
  <thead>
    <tr>
      <th><a href="#table1-heading">Heading</a></th>
      <th><a href="#table1-occurrences">Occurrences</a></th>
      <th><a href="#table1-average">Average per page</a></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><code>h1</code></td>
      <td>10,524,810</td>
      <td>1.66</td>
    </tr>
    <tr>
      <td><code>h2</code></td>
      <td>37,312,338</td>
      <td>5.88</td>
    </tr>
    <tr>
      <td><code>h3</code></td>
      <td>44,135,313</td>
      <td>6.96</td>
    </tr>
    <tr>
      <td><code>h4</code></td>
      <td>20,473,598</td>
      <td>3.23</td>
    </tr>
    <tr>
      <td><code>h5</code></td>
      <td>8,594,500</td>
      <td>1.36</td>
    </tr>
    <tr>
      <td><code>h6</code></td>
      <td>3,527,470</td>
      <td>0.56</td>
    </tr>
    <tr>
      <td><code>h7</code></td>
      <td>30,073</td>
      <td>0.005</td>
    </tr>
    <tr>
      <td><code>h8</code></td>
      <td>9,266</td>
      <td>0.0015</td>
    </tr>
  </tbody>
</table>

Pour la partie CSS :

1
2
3
col:target {
  background: #dedede;
}

Trouvé chez Manuel Matuzovic.

Faire grandir automatiquement une textarea⚓︎

🐣 2022-10

On commence avec le HTML suivant qui confère un parent (grow-wrap) au textarea ciblé :

1
2
3
4
5
<div class="grow-wrap">
  <textarea name="text" id="text" 
    onInput="this.parentNode.dataset.replicatedValue = this.value"
    ></textarea>
</div>

Info

La partie onInput pourrait être faite en JavaScript hors du HTML pour une réutilisation/séparation plus propre.

Un exemple possible :

textarea-grow.js
1
2
3
4
5
6
7
8
const growers = document.querySelectorAll('.grow-wrap')

growers.forEach((grower) => {
  const textarea = grower.querySelector('textarea')
  textarea.addEventListener('input', () => {
    grower.dataset.replicatedValue = textarea.value
  })
})

La suite se passe en CSS, une fois la valeur de la textarea dans le parent, on se sert de celui-ci pour obtenir la taille désirée du :after en fonction de l’espace utilisé.

textarea-grow.css
.grow-wrap {
  /* easy way to plop the elements on top of each other
  and have them both sized based on the tallest one's height */
  display: grid;
}
.grow-wrap::after {
  /* Note the weird space! Needed to preventy jumpy behavior */
  content: attr(data-replicated-value) ' ';

  /* This is how textarea text behaves */
  white-space: pre-wrap;

  /* Hidden from view, clicks, and screen readers */
  visibility: hidden;
}
.grow-wrap > textarea {
  /* You could leave this, but after a user resizes,
  then it ruins the auto sizing */
  resize: none;

  /* Firefox shows scrollbar on growth, you can hide like this. */
  overflow: hidden;
}
.grow-wrap > textarea,
.grow-wrap::after {
  /* Identical styling required!! */
  border: 1px solid black;
  padding: 0.5rem;
  font: inherit;

  /* Place on top of each other */
  grid-area: 1 / 1 / 2 / 2;
}

Il y a un article complet sur CSS-Tricks qui liste aussi des alternatives comportant davantage de JavaScript comme celle de Jim Nielsen.

Prendre en compte les préférences utilisateur·ice pour lancer une animation⚓︎

🐣 2022-10

J’ai découvert qu’il était possible d’afficher une image statique plutôt qu’un gif animé en fonction de la propriété prefers-reduced-motion directement dans le HTML :

1
2
3
4
<picture>
  <source srcset="moonwalk.png" media="(prefers-reduced-motion: reduce)" />
  <img src="moonwalk.gif" alt="Someone doing the moonwalk" />
</picture>

Voir aussi ce qu’il est possible de faire en CSS et en JS.

Info

On peut aussi se servir des media-queries dans le HTML pour adapter les images d’un thème clair/sombre :

1
2
3
4
<picture>
  <source srcset="dark_logo.jpg" media="(prefers-color-scheme: dark)" />
  <img src="light_logo.jpg" alt="Homepage" />
</picture>

Adapter le favicon au thème clair/sombre⚓︎

🐣 2022-10

Il est possible d’utiliser les media-queries pour adapter les couleurs du favicon en fonction du thème clair/foncé choisi.

favicon.svg
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <style>
    circle {
      fill: yellow;
      stroke: black;
      stroke-width: 3px;
    }
    @media (prefers-color-scheme: dark) {
      circle {
        fill: black;
        stroke: yellow;
      }
    }
  </style>
  <circle cx="50" cy="50" r="47" />
</svg>

Pour ensuite une inclusion classique :

<link rel="icon" href="/favicon.ico"> <!-- (1)! -->
<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
  1. Ça n’est pas trop mal supporté mais ça mérite tout de même une valeur par défaut.

Ils en parlent ici et .

Les favicons essentiels⚓︎

🐣 2022-10

Je me servais du RealFaviconGenerator mais il semblerait que ce ne soit plus nécessaire d’après un article de Andrey Sitnik qui réduit cela à 4 lignes :

favicons.html
1
2
3
4
<link rel="icon" href="/favicon.ico" sizes="any"><!-- 32×32 -->
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png"><!-- 180×180 -->
<link rel="manifest" href="/manifest.webmanifest">

Auxquelles il faut ajouter le manifest.webmanifest suivant :

1
2
3
4
5
6
{
  "icons": [
    { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
    { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }
  ]
}

Moins de fichiers… moins de maintenance 🙌 !

Faire une redirection en HTML⚓︎

🐣 2022-11

Sans avoir la main sur le serveur, il est possible de faire des redirections depuis une page HTML. Par exemple dans des environnements comme Github Pages ou certains générateurs de sites statiques :

redirect.html
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="refresh" content="0;url=https://example.com"/>
    <link rel="canonical" href="https://example.com"/>
    <title>Redirecting to https://example.com</title>
    <style>
        body {
            font-family: sans-serif;
            max-width: 40em;
            margin: 1em auto;
        }
    </style>
</head>
<body>
    <h1>Redirecting to https://example.com</h1>
    <p>This document has moved!</p>
    <p>Redirecting to <a href="https://example.com">https://example.com</a> in 0 seconds.</p>
</body>
</html>

Dernière mise à jour: 2022-11-06