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
340
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
140
Having no patience(Japanese)
muan
1
370
JSDC
muan
2
550
Design with Code
muan
5
540
Having no patience
muan
1
290
Design in GitHub
muan
5
370
Project Lab Squirrel #2
muan
1
620
Project Lab Squirrel #1
muan
8
850
A girl with no patience
muan
18
1.9k
Other Decks in Technology
See All in Technology
250905 大吉祥寺.pm 2025 前夜祭 「プログラミングに出会って20年、『今』が1番楽しい」
msykd
PRO
1
980
大「個人開発サービス」時代に僕たちはどう生きるか
sotarok
20
10k
20250913_JAWS_sysad_kobe
takuyay0ne
2
230
要件定義・デザインフェーズでもAIを活用して、コミュニケーションの密度を高める
kazukihayase
0
120
【実演版】カンファレンス登壇者・スタッフにこそ知ってほしいマイクの使い方 / 大吉祥寺.pm 2025
arthur1
1
890
フルカイテン株式会社 エンジニア向け採用資料
fullkaiten
0
8.8k
いま注目のAIエージェントを作ってみよう
supermarimobros
0
330
KotlinConf 2025_イベントレポート
sony
1
140
dbt開発 with Claude Codeのためのガードレール設計
10xinc
2
1.3k
なぜテストマネージャの視点が 必要なのか? 〜 一歩先へ進むために 〜
moritamasami
0
230
「Linux」という言葉が指すもの
sat
PRO
4
140
5分でカオスエンジニアリングを分かった気になろう
pandayumi
0
250
Featured
See All Featured
Thoughts on Productivity
jonyablonski
70
4.8k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.9k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Fireside Chat
paigeccino
39
3.6k
Reflections from 52 weeks, 52 projects
jeffersonlam
352
21k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.9k
A Tale of Four Properties
chriscoyier
160
23k
It's Worth the Effort
3n
187
28k
Mobile First: as difficult as doing things right
swwweet
224
9.9k
How to Think Like a Performance Engineer
csswizardry
26
1.9k
Unsuck your backbone
ammeep
671
58k
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.