Cette page de Chris Burnell illustre la puissance croissante du HTML natif, qui permet désormais des interactions dynamiques autrefois réservées à JavaScript. Elle présente des fonctionnalités comme les popovers, les modales <dialog>, les groupes <details> ou encore les attributs loading="lazy" et hidden until-found, démontrant comment le navigateur gère seul des comportements complexes sans code supplémentaire.
L’auteur souligne cependant les limites d’implémentation et d’accessibilité de certaines de ces fonctionnalités, comme le popover ou le hidden until-found, qui peuvent poser problème selon les navigateurs ou les outils d’assistance. Il encourage à les tester tout en veillant à les rendre accessibles.
Enfin, des éléments comme command et commandfor ouvrent la voie à des interactions encore plus poussées, bien que leur support reste partiel. La page sert à la fois de démonstration et de rappel sur l’évolution continue des standards web.
Cette page présente treize balises et attributs HTML5 méconnus ou sous-utilisés, avec des exemples concrets et leur niveau de compatibilité. Parmi les éléments mis en avant, la balise <details> permet d’afficher un contenu masqué par défaut, avec la possibilité de créer un accordéon via l’attribut name pour gérer l’ouverture exclusive d’un seul élément à la fois. L’attribut popover, récemment ajouté, simplifie l’affichage de fenêtres modales sans JavaScript, tandis que <data> facilite l’association entre une valeur lisible par l’humain et un identifiant machine.
D’autres fonctionnalités comme <meter> et <progress> offrent des solutions natives pour représenter visuellement des proportions ou des avancements, bien que leur affichage doive être géré manuellement. Les attributs comme loading="lazy" optimisent le chargement des ressources en différé, et poster permet de définir une image de prévisualisation pour les vidéos. Enfin, les types d’input natifs (date, color, range, etc.) améliorent l’expérience utilisateur sans recourir à des bibliothèques externes.
PHP 8.4, sorti en novembre 2024, introduit plusieurs fonctionnalités majeures pour rattraper des retards de conception. Les Property Hooks permettent de définir des getters et setters directement sur les propriétés, simplifiant le code. La visibilité asymétrique offre une meilleure protection des propriétés en lecture/écriture. D'autres améliorations incluent l'instanciation sans parenthèses, des fonctions de tableaux pratiques comme array_find(), array_any(), et array_all(), ainsi qu'un parser HTML5 natif. Ces évolutions, bien que tardives, modernisent significativement le langage.
L'article critique la gestion des formulaires en HTML, soulignant leur conception incomplète et leurs comportements inconsistants. Bien que de nouveaux éléments de formulaire aient été introduits, comme les champs email, téléphone, date et curseur de plage, ceux-ci restent basiques et ne couvrent pas des cas d'utilisation courants comme les comboboxes ou les curseurs de plage pour plusieurs valeurs. La validation intégrée, bien que pratique, manque de flexibilité, nécessitant souvent des solutions JavaScript personnalisées. L'auteur déplore le manque de standardisation pour des éléments combinés et des améliorations de style, pointant du doigt les lacunes persistantes malgré plus de dix ans depuis la recommandation HTML5.
Using the Ancient Evils for Debugging présente l’usage du tag HTML obsolète <plaintext> comme outil ponctuel de débogage. L’article du calendrier HTMHell explique comment ce mécanisme, qui force l’affichage du reste du document en texte brut, peut aider à analyser rapidement la sortie d’un script serveur ou à comprendre un comportement inattendu dans une page. Une lecture concise qui revient sur un héritage méconnu du HTML tout en montrant une approche simple – bien que non destinée à la production – pour faciliter certaines étapes de diagnostic.
L’attribut contenteditable="plaintext-only" en HTML offre une alternative sécurisée et simplifiée à contenteditable="true" : il permet de rendre un élément modifiable par l’utilisateur, mais en ne conservant que du texte brut, sans aucun formatage HTML ni balises (comme <script>, <b>, etc.). Contrairement à la valeur par défaut, qui accepte tout code HTML collé ou saisi (avec les risques de failles XSS ou de styles indésirables), plaintext-only supprime automatiquement tout balisage, garantissant un contenu propre et prévisible. Idéal pour les champs de titre, commentaires ou tags dans un CMS, il simplifie aussi la récupération du contenu en JavaScript (textContent et innerHTML renvoient la même chose). Bien que pratique, il ne dispense pas d’une validation côté serveur, car l’attribut peut être contourné. Compatible avec les navigateurs modernes, il évite les surprises tout en restant simple à implémenter.
L'auteur présente 3 techniques pour déclencher un téléchargement de fichier :
- un attribut introduit en HTML5
- la simulation d'un clic en JavaScript, par exemple suite à une action utilisateur
- dans le cas du téléchargement de données générées dynamiquement, les transformer en Blob et utiliser la méthode précédente
Une présentation très complète de l'élément meter : accessibilité, sémantique, etc.
Tout est dans le titre
Tout est dans le titre
Des choses intéressantes sur les boutons Submit
Tout est dans le titre
L'auteur démontre plusieurs utilisations d'éléments HTML ou de styles CSS3 qui remplacent avantageusement le JavaScript. Il commence par rappeler une règle : utiliser le langage le moins puissant possible (HTML d'abord, CSS ensuite et enfin JavaScript)
Les exemples :
- des custom switches
- Datalist
- un color picker
- un accordéon
- les modales
Tout est dans le titre
Tout est dans le titre
L'auteur présente ces 2 balises HTML5
Il s'agit d'un tutoriel pour créer un générateur de cartes de Noël basé sur une photo prise par webcam.
Tout est dans le titre
Tout est dans le titre