Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Details on <details>
Search
Mu-An Chiou
July 19, 2018
Technology
0
310
Details on <details>
https://gist.github.com/muan/adf26249c0adf018aea828105a5846eb
Mu-An Chiou
July 19, 2018
Tweet
Share
More Decks by Mu-An Chiou
See All by Mu-An Chiou
Publishing and Hosting on GitHub pages
muan
4
130
Having no patience(Japanese)
muan
1
370
JSDC
muan
2
540
Design with Code
muan
5
540
Having no patience
muan
1
290
Design in GitHub
muan
5
360
Project Lab Squirrel #2
muan
1
590
Project Lab Squirrel #1
muan
8
830
A girl with no patience
muan
18
1.9k
Other Decks in Technology
See All in Technology
C++26アップデート 2025-03
faithandbrave
0
920
AWS全冠芸人が見た世界 ~資格取得より大切なこと~
masakiokuda
5
6.4k
React ABC Questions
hirotomoyamada
0
500
バクラクの認証基盤の成長と現在地 / bakuraku-authn-platform
convto
2
640
ElixirがHW化され、最新CPU/GPU/NWを過去のものとする数万倍、高速+超省電力化されたWeb/動画配信/AIが動く日
piacerex
0
150
白金鉱業Meetup_Vol.18_AIエージェント時代のUI/UX設計
brainpadpr
1
180
OpenLane-V2ベンチマークと代表的な手法
kzykmyzw
0
110
JPOUG Tech Talk #12 UNDO Tablespace Reintroduction
nori_shinoda
2
150
Would you THINK such a demonstration interesting ?
shumpei3
1
230
Bazel for Ruby (RubyKaigi 2025)
p0deje
0
110
AI AgentOps LT大会(2025/04/16) Algomatic伊藤発表資料
kosukeito
0
150
QA/SDETの現在と、これからの挑戦
imtnd
0
140
Featured
See All Featured
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
Fontdeck: Realign not Redesign
paulrobertlloyd
83
5.5k
GitHub's CSS Performance
jonrohan
1030
460k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.3k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
23
2.6k
Building Adaptive Systems
keathley
41
2.5k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.2k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
9
760
YesSQL, Process and Tooling at Scale
rocio
172
14k
Fireside Chat
paigeccino
37
3.4k
Documentation Writing (for coders)
carmenintech
69
4.7k
Transcript
Greet(‘Brooklyn JS’)
Who this Mu-An Chiou Web Systems Engineer @ GitHub Taiwan
#1 GitHub @muan / Twitter @muanchiou
Details on <details> The best element in HTML 5. Do
@ me.
https://www.chromestatus.com/metrics/feature/timeline/popularity/480
What
What <details> <summary>Details</summary> <p>content</p> </details>
What <details> <summary>Details</summary> <p>content</p> </details>
What <details> <summary>Details</summary> <p>content</p> </details>
What <details open> <summary>Details</summary> <p>content</p> </details>
What details.open = true/false
What details.addEventListener(‘toggle’, () => {})
Why not this el.addEventListener('click', e => { const thing =
document.querySelector(‘.thing’) thing.style.display = ‘none’ })
Or this input:check + * { display: block; }
Here’s why Semantic
Here’s why Accessible
Here’s why No JavaScript
Here’s why = Interactive on load
When
When Accordions Popovers Dropdowns …
The beginning ! IE 11
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>
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>
Dropdown menu
Dropdown menu CSS: summary::before
Dropdown menu CSS: summary::before + JS: [esc] to close
Build status
Emoji reactions
Also Dialogs!
None
<details> <summary aria-haspopup=“dialog”>…</summary> <details-dialog> … </details-dialog> </details> <details-dialog>
<details-dialog> Focus management Tab trapping Accessibility enhancements Sorry <dialog>
<details> <summary aria-haspopup=“menu”>…</summary> <details-menu> … </details-menu> </details> <details-menu>
EXCITED? Let’s talk browser support —
Browser support Desktop 86% / Mobile 95% http://caniuse.com/#search=details
Polyfill javan/details-element-polyfill
CSS Helpers primer-utilities @ npm
<3 HTML
</details> GitHub @muan / Twitter @muanchiou Definitely the best element
in HTML 5.