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
260
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
120
Having no patience(Japanese)
muan
1
360
JSDC
muan
2
510
Design with Code
muan
5
530
Having no patience
muan
1
280
Design in GitHub
muan
5
350
Project Lab Squirrel #2
muan
1
530
Project Lab Squirrel #1
muan
8
780
A girl with no patience
muan
18
1.9k
Other Decks in Technology
See All in Technology
たくさん本を読んだけど 1年後には綺麗サッパリ!を乗り越えて 学習の鬼になるぞ👹
yum3
0
160
Azure Pipelinesを使用したCICDベースラインアーキテクチャ実践
yuriemori
0
190
スタートアップにおける組織設計とスクラムの長期戦略 / Scrum Fest Kanazawa 2024
yoshikiiida
13
3.6k
LLMアプリケーションの評価の実践と課題 ~PharmaXにおける今後の展望~
pharma_x_tech
2
160
【基調講演】変える、今ここから ― IoTとAIで紡ぐ未来
soracom
PRO
0
320
dxd2024-生成AIに振り回された3か月間の成功と失敗/dxd2024-link-and-motivation
lmi
2
260
[I/O Extended Android 2024] What`s new in Android 2024
kyeongwan
0
220
推薦システムを本番導入する上で一番優先すべきだったこと~NewsPicks記事推薦機能の改善事例を元に~
morinota
0
120
セキュリティ研修 Day1【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
160
AI研修【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
130
Azure AI ことはじめ
tsubakimoto_s
0
130
What if...? 처음부터 다시 LLM 어플리케이션을 개발한다면
huffon
0
1k
Featured
See All Featured
Six Lessons from altMBA
skipperchong
24
3.2k
Gamification - CAS2011
davidbonilla
78
4.9k
Automating Front-end Workflow
addyosmani
1362
200k
The Brand Is Dead. Long Live the Brand.
mthomps
52
36k
The MySQL Ecosystem @ GitHub 2015
samlambert
248
12k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
353
29k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
325
21k
Teambox: Starting and Learning
jrom
130
8.6k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
78
15k
What's new in Ruby 2.0
geeforr
338
31k
Designing on Purpose - Digital PM Summit 2013
jponch
113
6.6k
Building Flexible Design Systems
yeseniaperezcruz
323
37k
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.