Certains pratiques avec l'élément de dialogue HTML

Ceci est mon premier regard sur le HTML<dialog></dialog> élément. Je le connais depuis un moment mais je ne l'avais pas utilisé jusqu'à présent. Il offre des fonctionnalités impressionnantes. Bien que je ne puisse pas dire définitivement si vous devez l'utiliser en production, il devient de plus en plus viable.

Au-delà de la sémantique: API et CSS spécialisés

Le<dialog></dialog> L'élément se démarque parce que son support de navigateur a un impact significatif sur son utilité. Contrairement aux éléments HTML5 précédents, sa fonctionnalité n'est pas facilement reproduite avec des alternatives de base. Vous ne pouvez pas simplement le traiter comme un amélioration sémantique<div> . Ses capacités s'étendent bien au-delà de cela.<h3 id="Support-du-navigateur-le-paysage-actuel"> Support du navigateur: le paysage actuel</h3> <p> Au moment de la rédaction:</p> <ul> <li> Chrome le prend en charge (version 37). Le soutien d'Edge est imminent.</li> <li> Firefox possède les styles d'utilisateur-agent (UA) (version 69), mais la fonctionnalité complète nécessite le drapeau <code>dom.dialog_element.enabled . Même alors, le support CSS semble incomplet.

Safari manque de soutien.

Les polyfills sont disponibles. Bien que le support plus large soit préférable, le support existant couplé au polyfilant fait<dialog></dialog> Une option convaincante pour de nombreux développeurs.

Ouvert ou fermé: l'état fondamental

<dialog>
  Je suis fermé.
</dialog>
<dialog open="">
  Je suis ouvert.
</dialog>

Style-agent utilisateur: une fondation

Chrome et Firefox présentent un style par défaut similaire de la feuille de style UA: centré avec des marges automatiques, une bordure noire épaisse et un dimensionnement basé sur le contenu. Ces styles sont facilement remplacés par des CSS personnalisés pour correspondre à la conception de votre site.

API JavaScript: contrôle programmatique

Étant donné une référence de l'élément dialog :

 Dialog.show ();
Dialog.Hide ();

Pour un comportement modal, utilisez:

 Dialog.ShowModal ();

showModal() gère la toile de fond et interagit avec une «pile de dialogue en attente», permettant des modaux imbriqués.

Fermeture basée sur HTML: soumission de formulaire

La fermeture d'une boîte de dialogue peut être réalisée en soumettant un formulaire à l'intérieur:

Fermer

La toile de fond: un repère visuel

Ouvrant par programme un<dialog></dialog> fournit automatiquement une toile de fond. L'apparence est personnalisable en utilisant le pseudo-élément ::backdrop . Par exemple, pour remplacer la toile de fond noire semi-transparente par défaut par des rayures rouges:

Bonus cool: backdrop-filter permet des effets comme le flou de fond.

Gestion de la mise au point: considérations d'accessibilité

Le<dialog></dialog> L'élément se concentre automatiquement vers lui lors de l'ouverture (testé avec la voix off sur macOS). Bien qu'il ne piége pas intrinsèquement la mise au point (parfaitement adaptée aux modaux), les techniques CSS peuvent y parvenir.

Rob Dodson a décrit à juste titre les modaux comme "la bataille de boss à la fin de l'accessibilité Web". Le natif<dialog></dialog> L'élément simplifie considérablement ce défi, y compris la fermeture automatique des clés <kbd>Escape</kbd> . Cliquer à l'extérieur pour fermer n'est pas encore pris en charge, mais les futures mises à jour peuvent résoudre ce problème en fonction des commentaires des utilisateurs. L'article de l'IRE fournit des informations inestimables sur la construction de dialogues personnalisés accessibles.