Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Details on <details>

Details on <details>

Afd3cc3e385d754183336c859d9e694a?s=128

Mu-An Chiou

July 19, 2018
Tweet

More Decks by Mu-An Chiou

Other Decks in Technology

Transcript

  1. Greet(‘Brooklyn JS’)

  2. Who this Mu-An Chiou Web Systems Engineer @ GitHub Taiwan

    #1 GitHub @muan / Twitter @muanchiou
  3. Details on <details> The best element in HTML 5. Do

    @ me.
  4. https://www.chromestatus.com/metrics/feature/timeline/popularity/480

  5. What

  6. What <details> <summary>Details</summary> <p>content</p> </details>

  7. What <details> <summary>Details</summary> <p>content</p> </details>

  8. What <details> <summary>Details</summary> <p>content</p> </details>

  9. What <details open> <summary>Details</summary> <p>content</p> </details>

  10. What details.open = true/false

  11. What details.addEventListener(‘toggle’, () => {})

  12. Why not this el.addEventListener('click', e => { const thing =

    document.querySelector(‘.thing’) thing.style.display = ‘none’ })
  13. Or this input:check + * { display: block; }

  14. Here’s why Semantic

  15. Here’s why Accessible

  16. Here’s why No JavaScript

  17. Here’s why = Interactive on load

  18. When

  19. When Accordions Popovers Dropdowns …

  20. The beginning ! IE 11

  21. Dropdown menu <div class=“dropdown js-menu-container”> <button class=“btn js-menu-target” aria-haspopup=“menu”>…</button> <ul

    class=“dropdown-content js-menu-content”> <li><a href=“/muan">profile</a></li> … </ul> </div>
  22. Dropdown menu <details class=“dropdown”> <summary class=“btn” aria-haspopup=“menu”>…</summary> <ul class=“dropdown-content”> <li><a

    href=“/muan">profile</a></li> … </ul> </details>
  23. Dropdown menu

  24. Dropdown menu CSS: summary::before

  25. Dropdown menu CSS: summary::before + JS: [esc] to close

  26. Build status

  27. Emoji reactions

  28. Also Dialogs!

  29. None
  30. <details> <summary aria-haspopup=“dialog”>…</summary> <details-dialog> … </details-dialog> </details> <details-dialog>

  31. <details-dialog> Focus management Tab trapping Accessibility enhancements Sorry <dialog>

  32. <details> <summary aria-haspopup=“menu”>…</summary> <details-menu> … </details-menu> </details> <details-menu>

  33. EXCITED? Let’s talk browser support —

  34. Browser support Desktop 86% / Mobile 95% http://caniuse.com/#search=details

  35. Polyfill javan/details-element-polyfill

  36. CSS Helpers primer-utilities @ npm

  37. <3 HTML

  38. </details> GitHub @muan / Twitter @muanchiou Definitely the best element

    in HTML 5.