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

Details on <details>

Details on <details>

Mu-An Chiou

July 19, 2018
Tweet

More Decks by Mu-An Chiou

Other Decks in Technology

Transcript

  1. Greet(‘Brooklyn JS’)

    View full-size slide

  2. Who this
    Mu-An Chiou
    Web Systems Engineer @ GitHub
    Taiwan #1
    GitHub @muan / Twitter @muanchiou

    View full-size slide

  3. Details on
    The best element in HTML 5. Do @ me.

    View full-size slide

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

    View full-size slide

  5. What

    Details
    content

    View full-size slide

  6. What

    Details
    content

    View full-size slide

  7. What

    Details
    content

    View full-size slide

  8. What

    Details
    content

    View full-size slide

  9. What
    details.open = true/false

    View full-size slide

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

    View full-size slide

  11. Why not this
    el.addEventListener('click', e => {
    const thing = document.querySelector(‘.thing’)
    thing.style.display = ‘none’
    })

    View full-size slide

  12. Or this
    input:check + * {
    display: block;
    }

    View full-size slide

  13. Here’s why
    Semantic

    View full-size slide

  14. Here’s why
    Accessible

    View full-size slide

  15. Here’s why
    No JavaScript

    View full-size slide

  16. Here’s why
    = Interactive on load

    View full-size slide

  17. When
    Accordions
    Popovers
    Dropdowns

    View full-size slide

  18. The beginning
    ! IE 11

    View full-size slide

  19. Dropdown menu

    aria-haspopup=“menu”>…

    profile



    View full-size slide

  20. Dropdown menu

    aria-haspopup=“menu”>…

    profile



    View full-size slide

  21. Dropdown menu

    View full-size slide

  22. Dropdown menu
    CSS: summary::before

    View full-size slide

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

    View full-size slide

  24. Build status

    View full-size slide

  25. Emoji reactions

    View full-size slide

  26. Also
    Dialogs!

    View full-size slide


  27. Focus management
    Tab trapping
    Accessibility enhancements
    Sorry

    View full-size slide

  28. EXCITED?
    Let’s talk browser support —

    View full-size slide

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

    View full-size slide

  30. Polyfill
    javan/details-element-polyfill

    View full-size slide

  31. CSS Helpers
    primer-utilities @ npm

    View full-size slide


  32. GitHub @muan / Twitter @muanchiou
    Definitely the best element in HTML 5.

    View full-size slide