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
270
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
520
Design with Code
muan
5
530
Having no patience
muan
1
280
Design in GitHub
muan
5
350
Project Lab Squirrel #2
muan
1
550
Project Lab Squirrel #1
muan
8
790
A girl with no patience
muan
18
1.9k
Other Decks in Technology
See All in Technology
【株式会社ELYZA】|GENIAC成果報告会 自社開発モデルプレゼンテーション
elyza
1
310
突撃! 隣のAmazon Bedrockユーザー 〜YouはどうしてAWSで?〜
minorun365
PRO
3
390
たった1人からはじめる【Agile Community of Practice】~ソース原理とFearless Changeを添えて~
ktc_corporate_it
1
500
なにもしてないのにNew Relicのデータ転送量が増えていたときに確認したこと
tk3fftk
2
230
AIで変わるテスト自動化:最新ツールの多様なアプローチ/ 20240910 Takahiro Kaneyama
shift_evolve
0
240
Functional TypeScript
naoya
11
4.8k
Tricentisにおけるテスト自動化へのAI活用ご紹介/20240910Shunsuke Katakura
shift_evolve
0
200
ナレッジグラフとLLMの相互利用
koujikozaki
0
420
OCI で始める!! Red Hat OpenShift / Get Started OpenShift on OCI
oracle4engineer
PRO
1
190
Fediverse Discovery Providers overview
andypiper
0
170
グイグイ系QAマネージャーの仕事
sadonosake
0
350
自作Cコンパイラ 8時間の奮闘
soukouki
0
850
Featured
See All Featured
Documentation Writing (for coders)
carmenintech
65
4.3k
Imperfection Machines: The Place of Print at Facebook
scottboms
263
13k
How GitHub (no longer) Works
holman
310
140k
The Straight Up "How To Draw Better" Workshop
denniskardys
230
130k
Unsuck your backbone
ammeep
667
57k
Code Reviewing Like a Champion
maltzj
517
39k
VelocityConf: Rendering Performance Case Studies
addyosmani
322
23k
We Have a Design System, Now What?
morganepeng
48
7.1k
Mobile First: as difficult as doing things right
swwweet
221
8.8k
Principles of Awesome APIs and How to Build Them.
keavy
125
16k
Automating Front-end Workflow
addyosmani
1365
200k
Building Your Own Lightsaber
phodgson
101
6k
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.