Details on <details>

https://gist.github.com/muan/adf26249c0adf018aea828105a5846eb

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!
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.