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
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
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
Amazon EKS Auto ModeでKubernetesの運用をシンプルにする
sshota0809
0
110
コンソールで学ぶ!AWS CodePipelineの機能とオプション
umekou
2
110
製造業の会計システムをDDDで開発した話
caddi_eng
3
960
OPENLOGI Company Profile
hr01
0
61k
Compose MultiplatformにおけるiOSネイティブ実装のベストプラクティス
enomotok
1
210
Amazon GuardDuty Malware Protection for Amazon S3を使おう
ryder472
2
100
お問い合わせ対応の改善取り組みとその進め方
masartz
1
370
Amazon Q Developer 他⽣成AIと⽐較してみた
takano0131
1
120
パスキーでのログインを 実装してみよう!
hibiki_cube
0
670
LINEギフトのLINEミニアプリアクセシビリティ改善事例
lycorptech_jp
PRO
0
240
SpannerとAurora DSQLの同時実行制御の違いに想いを馳せる
masakikato5
0
570
React Server Componentは 何を解決し何を解決しないのか / What do React Server Components solve, and what do they not solve?
kaminashi
6
1.2k
Featured
See All Featured
Documentation Writing (for coders)
carmenintech
69
4.7k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
7
620
Build The Right Thing And Hit Your Dates
maggiecrowley
34
2.6k
Building Adaptive Systems
keathley
41
2.5k
Scaling GitHub
holman
459
140k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
227
22k
Being A Developer After 40
akosma
90
590k
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.