L’élément HTML <dialog> offre une solution native pour créer des fenêtres modales, introduisant une gestion simplifiée de leur ouverture, positionnement et fermeture. Contrairement à show(), la méthode showModal() génère automatiquement un arrière-plan, centre la fenêtre et permet de la fermer avec la touche Échap. La fermeture peut être gérée via JavaScript avec close() ou de manière déclarative en utilisant un formulaire avec method="dialog".
Le balisage de base repose sur un bouton pour déclencher l’ouverture et un élément <dialog> contenant le contenu. Pour une approche sans JavaScript, des attributs expérimentaux comme command et commandfor permettent de lier directement un bouton à une action (ouverture ou fermeture) sur une fenêtre spécifique, simplifiant ainsi l’intégration.
L’article souligne la polyvalence de cet élément, tout en notant certaines subtilités, comme l’absence de closeModal() au profit de close(), et l’évolution des fonctionnalités déclaratives pour réduire le besoin en scripts.
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 :)