L’attribut HTML closedby simplifie la gestion de la fermeture des boîtes de dialogue (<dialog>) en remplaçant les solutions JavaScript par une approche native. Il permet de contrôler précisément les méthodes de fermeture : any autorise l’échappement, les gestes natifs ou un clic en dehors ; closerequest limite à l’échappement et aux gestes ; none interdit toute fermeture accidentelle, réservant cette action à un bouton dédié. Cette fonctionnalité, présentée lors de la Google I/O 2026, offre une alternative plus intuitive aux développeurs.
La compatibilité reste partielle, avec un support d’environ 70 % selon Caniuse, incluant Chrome, Edge et Firefox, mais excluant Safari. Pour pallier cette lacune, un fallback JavaScript peut être implémenté pour reproduire le comportement closedby="any". L’attribut n’impacte pas la sémantique du <dialog>, mais son utilisation doit respecter les bonnes pratiques d’accessibilité, notamment en garantissant un retour de focus approprié et en adaptant le comportement aux besoins des utilisateurs.
L'article présente l'élément <dialog> en HTML, une solution moderne pour créer des modales et des boîtes de dialogue non modales. Cet article explique comment utiliser cet élément natif du navigateur pour simplifier le code et réduire les dépendances. Il couvre l'ouverture et la fermeture des dialogues, ainsi que des fonctionnalités avancées comme la fermeture légère (light dismissal) et la gestion des événements de fermeture.
L'article explore comment transformer les boîtes de dialogue HTML en éléments visuellement attrayants et cohérents avec l'identité d'une marque. En utilisant des techniques CSS avancées telles que ::backdrop, backdrop-filter, et des animations, l'auteur montre comment dépasser les designs génériques pour créer des expériences utilisateur uniques et mémorables. L'article met en lumière des exemples concrets, comme l'intégration de designs rétro inspirés des années 90, tout en maintenant l'accessibilité et la performance. Il encourage les designers à voir les boîtes de dialogue non seulement comme des éléments fonctionnels, mais aussi comme des opportunités pour renforcer le storytelling et l'identité visuelle d'un site web.
Plusieurs solutions sont proposées : l'élément details, l'élément dialog, et l'API popover
Tout est dans le titre
Tout est dans le titre
Tout est dans le titre
Tout est dans le titre
Tout est dans le titre
Il s'agit des balises details, dialog, data, base, meter et progress... Leur utilité est bien expliquée dans l'article :)