html - How To Add CSS3 Transition With HTML5 details/summary tag reveal ?

cy_altern CC BY-SA 22/04/2021

<details> - HTML (HyperText Markup Language) | MDN
▻https://developer.mozilla.org/fr/docs/Web/HTML/Element/details

Un afficher/masquer en pur HTML 5 (sans JS ni CSS) : une balise <details> avec un <summary> pour faire le titre clicable
...et pour ajouter une animation : ▻https://stackoverflow.com/questions/38213329/how-to-add-css3-transition-with-html5-details-summary-tag-reveal

Petit bémol : point de vue accessibilité ça ne semble pas idéal : ▻https://daverupert.com/2019/12/why-details-is-not-an-accordion (on se le réservera pour les outils où référencement et accessibilité ne sont pas des paramètres pris en compte donc...)

#HTML #afficher_masquer #summary

cy_altern CC BY-SA

ARNO* @arno ART LIBRE 22/04/2021

Marrant que ce truc soit aussi rigoureusement inconnu, malgré une excellente compatibilité (96% sur caniuse).

ARNO* @arno ART LIBRE
RastaPopoulos @rastapopoulos CC BY-NC 23/04/2021

Ça veut rien c’est que c’est pas accessible : si c’est dans la norme HTML5 c’est que c’est accessible quand c’est utilisé pour ce que c’est prévu.
Mais c’est pas accessible pour en faire autre chose.
Donc la question est : pour quelle(s) utilisation(s) précise(s) c’est prévu ?

RastaPopoulos @rastapopoulos CC BY-NC
Monolecte 😷🤬 @monolecte CC BY-NC-SA 23/04/2021

Ça a l’air d’être ça.
The <details> creates a disclosure widget in which information is visible only when the widget is toggled into an “open” state. A summary or label can be provided using the <summary> element.
A disclosure widget is typically presented onscreen using a small triangle which rotates (or twists) to indicate open/closed status, with a label next to the triangle. If the first child of the <details> element is a <summary>, the contents of the <summary> element are used as the label for the disclosure widget.

Monolecte 😷🤬 @monolecte CC BY-NC-SA

Écrire un commentaire