<!doctype html><!-- (1)! --><htmllang="fr"><!-- (2)! --><head><metacharset="utf-8"><!-- (3)! --><!-- (4)! --><metaname="viewport"content="width=device-width,initial-scale=1"><!-- (5)! --><metaname="referrer"content="origin-when-cross-origin"><!-- (6)! --><title>Title</title><!-- (1)! --><linkrel="icon"href="data:;base64,iVBORw0KGgo="><!-- (7)! --><linkrel="stylesheet"href="style.css"/><style></style></head><body><header><!-- logo etc --><h1>Title</h1><nav></nav><formrole="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><scripttype="module"></script></body>
Pour en faire un document valide HTML5.
Pour les lecteurs d’écran, le référencement, les extensions, etc.
Doit être dans les premiers 1024 bytes, plutôt à mettre avant le <title>, référence à ce sujet.
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.
Gif transparent le plus petit qui soit, évite une requête inutile vers le serveur (et une erreur dans la console).
Ne dois pas être contenu dans une <section>
Capturer une image/vidéo de la webcam depuis le navigateur⚓︎
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><caption> Frequency and average use of heading elements.
</caption><colgroup><colid="table1-heading"/><colid="table1-occurrences"/><colid="table1-average"/></colgroup><thead><tr><th><ahref="#table1-heading">Heading</a></th><th><ahref="#table1-occurrences">Occurrences</a></th><th><ahref="#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>
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é.
.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:1pxsolidblack;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 :
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 :
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 :
<htmllang="en"><head><metacharset="utf-8"/><metaname="viewport"content="width=device-width, initial-scale=1.0"><metahttp-equiv="refresh"content="0;url=https://example.com"/><linkrel="canonical"href="https://example.com"/><title>Redirecting to https://example.com</title><style>body{font-family:sans-serif;max-width:40em;margin:1emauto;}</style></head><body><h1>Redirecting to https://example.com</h1><p>This document has moved!</p><p>Redirecting to <ahref="https://example.com">https://example.com</a> in 0 seconds.</p></body></html>
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 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 :
<hgrouprole="group"aria-roledescription="Heading group"><paria-roledescription="subtitle">Magazine of the Decade</p><h1>THE MONTH</h1><paria-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.