HTML⚓︎
Un gabarit minimaliste⚓︎
2022-08
Parce qu’il faut bien copier-coller une source pour démarrer .
- 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. - Pourquoi pas de balise
meta
avec une valeurX-UA-Compatible
? Voir cette réponse sur StackOverflow. - Beaucoup de monde dans la balise
meta
relative auviewport
, et nous sommes responsables de cela… - 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⚓︎
2022-09
Exploration de Austin Gil.
C’est uniquement possible sur certains navigateurs mobiles mais c’est bon à savoir.
capture.html | |
---|---|
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 :
Pour la partie CSS :
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é :
Info
La partie onInput
pourrait être faite en JavaScript hors du HTML pour une réutilisation/séparation plus propre.
Un exemple possible :
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é.
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 :
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 :
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 | |
---|---|
Pour ensuite une inclusion classique :
- Ça n’est pas trop mal supporté mais ça mérite tout de même une valeur par défaut.
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 | |
---|---|
Auxquelles il faut ajouter le manifest.webmanifest
suivant :
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 :
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.
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
:
Le résultat doit ensuite être préfixé par l’algorithme (sha384-
dans cet exemple) :
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 | |
---|---|
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 | |
---|---|
Vous pouvez jouer avec ici (nouvel onglet)