2010-06-18 12 views
20

Je me demandais ce que certains de mes collègues concepteurs/concepteurs web pensaient être le meilleur élément HTML 5 à utiliser pour un dialogue modal comme une lightbox, superbox, thickbox, ou quel que soit votre favori la saveur peut arriver à être.Elément HTML5 sémantiquement précis pour une boîte de dialogue modale

Étant donné que ces types d'IU ne suivent pas le flux typique d'une page Web «normale» (qui, apparemment, selon HTML 5 spec gourous est, essentiellement, un blog), ils ne tombent pas vraiment en place comme un <header>, <nav>, <section>, <article>, ou un <footer> (parmi d'autres nouveaux éléments «sémantiques») pourrait.

Bien sûr, il y a toujours le <div>, mais je pensais juste qu'il pourrait y avoir quelque chose d'un peu plus précis sur le plan sémantique.

Malheureusement, il n'y a pas d'élément <modal>. Que pensez-vous de savoir s'il devrait y en avoir un dans la spécification? Et puisque l'élément n'existe pas, quel serait votre meilleur choix?

Répondre

22

<aside> semble approprié. La spécification actuelle avec les sections pertinentes en gras:

Le côté élément représente une section d'une page qui se compose de contenu qui est tangentiellement liée au contenu autour de l'élément de côté, et qui pourrait être considéré comme distinct à partir de ce contenu. De telles sections sont souvent représentées sous forme de barres latérales en typographie imprimée.

L'élément peut être utilisé pour effets typographiques comme des citations de traction ou sidebars, pour la publicité, pour groupes d'éléments de nav, et pour tout autre contenu qui est considéré comme distinct du contenu principal de la page.

Dans ce cas, un modal est "lié tangentiellement" à l'action qui l'a causé. Bien que l'on puisse normalement s'attendre à ce qu'une mise de côté apparaisse dans une barre latérale, l'un des objectifs du contenu sémantique est de permettre une polyvalence qui n'est pas restreinte par les caractéristiques physiques de la page. La dernière phrase de la spec semble impliquer juste ce cas d'utilisation polyvalent.

+1

Bien que, pour être juste, une autre étiquette sémantique telle que '' ou '

' ou même '' semble plus appropriée. – mVChr

+0

C'est en fait l'une des réponses les plus fantastiques que j'ai jamais reçu — bien écrit et approfondi. Je vais attendre quelques réponses de plus, si possible, avant de décider que votre réponse est la bonne, cependant. Je vous remercie! – KyleFarris

+0

Sur une note de côté, je suppose que j'aurais dû savoir qu'ils auraient html encodé mon emdash ... Lame. – KyleFarris

15

La version actuelle du code HTML a un élément dialog. Il a été retiré à un moment donné, mais il est de retour.

L'élément de dialogue représente une partie d'une application que l'utilisateur interagit avec pour exécuter une tâche, par exemple une boîte de dialogue, un inspecteur, ou fenêtre.

Pour l'accessibilité (jusqu'à ce que l'élément soit plus largement supporté) j'inclurais aussi le dialog ARIA role. Pour obtenir l'API JavaScript dans les navigateurs qui ne supportent pas nativement l'élément <dialog>, vous pouvez utiliser un polyfill.

+0

Je me sens comme vous et mVChr faire un bon point - peut-être la réponse est qu'il n'y a pas un seul élément pour représenter tous les modaux. Je dirais qu'il est logique de dire

+0

3 ans plus tard, le support est encore très pauvre (http://caniuse.com/#feat=dialog), je dirais qu'il est préférable de s'en tenir à

+1

@Capsule Merci. La façon dont la question a été formulée semblait indiquer que le PO était plus intéressé par une réponse théorique que pratique. Il semble que le support du navigateur natif soit présent dans la plupart des principaux navigateurs. J'ai ajouté quelques informations pratiques sur la façon d'écrire du code évolutif qui fonctionne aujourd'hui. –