Aller au contenu

HTML⚓︎

Un gabarit minimaliste⚓︎

🐣 2022-08

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

template.html
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!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>
    <!-- logo etc -->
    <h1>Title</h1>
    <nav></nav>
    <form role="search"></form> <!-- if it exists -->
  </header>

  <main><!-- (8)! -->
    <!-- what your page is all about -->
  </main>

  <aside>
    <!-- complementary information -->
  </aside>

  <footer>
    <!-- copyright notice etc -->
    <nav></nav> <!-- if you want to -->
  </footer>
  <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).
  8. Ne dois pas être contenu dans une <section>

🤳 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
1
<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
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<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
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
.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
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<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 :

1
2
<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 là.

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
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
<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>

Un bouton pour fermer une modale⚓︎

🐣 2022-12

Il y a d’autres façons de le faire, toute une liste est disponible sur HTMLHell.

close-button.html
1
2
3
4
<button type="button">
  Close
  <span aria-hidden="true">×</span>
</button>

J’ai choisi celle-ci car elle est explicite et qu’elle évite d’annoncer le signe de multiplication (✕).

Générer des hashs SubResource Integrity (SRI)⚓︎

🐣 2022-12

Il s’agit d’un moyen de s’assurer que le fichier distant (CDN par exemple) téléchargé dans la page est celui escompté. Cela donne une garantie supplémentaire face aux proxys douteux, aux attaques intermédiaires ou aux CDN qui se sont fait hackés. Ce n’est pas magique non plus et pour la personne qui a également accès au HTML envoyé/reçu il est possible de modifier aussi la valeur de l’attribut integrity…

Il existe des sites pour ça mais il est possible de le générer à la main dans le terminal grâce à openssl :

1
 openssl dgst -sha384 -binary FILENAME.js | openssl base64 -A

Le résultat doit ensuite être préfixé par l’algorithme (sha384- dans cet exemple) :

1
2
3
<script src="https://unpkg.com/react@18/umd/react.production.min.js" 
  integrity="sha384-tMH8h3BGESGckSAVGZ82T9n90ztNXxvdwvdM6UoR56cYcf+0iGXBliJ29D+wZ/x8"
  crossorigin="anonymous"></script>

Warning

L’attribut crossorigin="anonymous" est nécessaire lorsqu’il s’agit d’un fichier sur un autre domaine sinon le navigateur ne fait pas la vérification !

Sémantique des sous-titres⚓︎

🐣 2023-01

Il ne s’agit pas de sous-titrer des vidéos mais de gérer un sous-titre à un titre principal sur une page web.

J’ai souvent utilisé le titre <hx> suivant en fonction de l’arborescence en cours mais Steve Faulkner propose une autre sémantique que je trouve intéressante :

subheadings.html
1
2
3
4
5
<hgroup role="group" aria-roledescription="Heading group">
  <p aria-roledescription="subtitle">Magazine of the Decade</p>
  <h1>THE MONTH</h1>
  <p aria-roledescription="subtitle">The Best of UK and Foreign Media</p>
</hgroup>

En utilisant un <hgroup>, cela permet d’avoir des sous-titres supérieurs ou inférieurs sans altérer une arborescence de titres dans la page. Les balises ARIA viennent décrire explicitement la sémantique des différentes parties et de leurs relations.

Afficher une option par défaut pour un select requis⚓︎

🐣 2023-04

Pour un élément de formulaire de type <select> requis, on veut tout de même afficher un premier choix sans qu’il soit pour autant possible de le soumettre.

Avec la combinaison des attributs disabled et selected on a le premier choix qui est sélectionné par défaut mais qui ne peut pas être soumis et qui n’est pas sélectionnable à nouveau lorsqu’on a choisi l’une des options possibles.

select-required.html
1
2
3
4
5
6
<select required>
  <option disabled selected value>Choisir une option</option>
  <option value="choix-1">Choix 1</option>
  <option value="choix-2">Choix 2</option>
  <option value="choix-3">Choix 3</option>
</select>

Vous pouvez jouer avec ici (nouvel onglet)

Dernière mise à jour: 2023-04-22