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
300
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
360
JSDC
muan
2
530
Design with Code
muan
5
530
Having no patience
muan
1
290
Design in GitHub
muan
5
360
Project Lab Squirrel #2
muan
1
580
Project Lab Squirrel #1
muan
8
820
A girl with no patience
muan
18
1.9k
Other Decks in Technology
See All in Technology
データの品質が低いと何が困るのか
kzykmyzw
6
1.1k
運用しているアプリケーションのDBのリプレイスをやってみた
miura55
1
710
Swiftの “private” を テストする / Testing Swift "private"
yutailang0119
0
130
Oracle Cloud Infrastructure:2025年2月度サービス・アップデート
oracle4engineer
PRO
1
210
個人開発から公式機能へ: PlaywrightとRailsをつなげた3年の軌跡
yusukeiwaki
11
3k
2025-02-21 ゆるSRE勉強会 Enhancing SRE Using AI
yoshiiryo1
1
320
トラシューアニマルになろう ~開発者だからこそできる、安定したサービス作りの秘訣~
jacopen
2
2k
組織貢献をするフリーランスエンジニアという生き方
n_takehata
1
1.3k
あれは良かった、あれは苦労したB2B2C型SaaSの新規開発におけるCloud Spanner
hirohito1108
2
570
AndroidデバイスにFTPサーバを建立する
e10dokup
0
250
飲食店予約台帳を支えるインタラクティブ UI 設計と実装
siropaca
7
1.8k
『衛星データ利用の方々にとって近いようで触れる機会のなさそうな小話 ~ 衛星搭載ソフトウェアと衛星運用ソフトウェア (実物) を動かしながらわいわいする編 ~』 @日本衛星データコミニティ勉強会
meltingrabbit
0
140
Featured
See All Featured
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
Designing for humans not robots
tammielis
250
25k
Faster Mobile Websites
deanohume
306
31k
Statistics for Hackers
jakevdp
797
220k
Building a Scalable Design System with Sketch
lauravandoore
461
33k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
How STYLIGHT went responsive
nonsquared
98
5.4k
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
21
2.5k
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
Optimising Largest Contentful Paint
csswizardry
34
3.1k
4 Signs Your Business is Dying
shpigford
182
22k
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.