Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Details on <details>
Mu-An Chiou
July 19, 2018
Technology
0
130
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
98
Having no patience(Japanese)
muan
1
330
JSDC
muan
2
460
Design with Code
muan
5
480
Having no patience
muan
1
270
Design in GitHub
muan
5
340
Project Lab Squirrel #2
muan
1
410
Project Lab Squirrel #1
muan
8
640
A girl with no patience
muan
18
1.9k
Other Decks in Technology
See All in Technology
誰が正解を知っているのか / Who knows the right answer
takaking22
1
240
UIKitのアップデート #WWDC22
akatsuki174
4
330
ROS再入門-はじめてのSLAM-
miura55
0
400
Custom AppをIP制限ありのままで審査に通す方法
yusuga
0
680
Azure Arc Virtual MachineとAzure Arc Resource Bridge / VM provisioning through Azure portal on Azure Stack HCI (preview)
sashizaki
0
130
Autonomous Database Cloud 技術詳細 / adb-s_technical_detail_jp
oracle4engineer
PRO
10
18k
Data in Google I/O - IO Extended GDG Seoul
kennethanceyer
0
150
ソフトウェアライセンス 2022 / Software License 2022
cybozuinsideout
PRO
1
1.1k
Power AutomateでのAdaptive Cards-基本編
miyakemito
1
310
SwiftUI Layout
auramagi
1
100
OpsJAWS Meetup21 システム運用アンチパターンのすすめ
yoshiiryo1
0
1.4k
What's new in Vision
satotakeshi
0
210
Featured
See All Featured
GraphQLとの向き合い方2022年版
quramy
16
8.3k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
237
19k
Practical Orchestrator
shlominoach
178
8.6k
The Illustrated Children's Guide to Kubernetes
chrisshort
15
36k
Producing Creativity
orderedlist
PRO
334
37k
How to name files
jennybc
40
61k
Web Components: a chance to create the future
zenorocha
303
40k
In The Pink: A Labor of Love
frogandcode
131
21k
Designing for humans not robots
tammielis
241
23k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
11
4.7k
Imperfection Machines: The Place of Print at Facebook
scottboms
253
12k
Become a Pro
speakerdeck
PRO
3
840
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.