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
170
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
110
Having no patience(Japanese)
muan
1
340
JSDC
muan
2
470
Design with Code
muan
5
480
Having no patience
muan
1
270
Design in GitHub
muan
5
340
Project Lab Squirrel #2
muan
1
440
Project Lab Squirrel #1
muan
8
680
A girl with no patience
muan
18
1.9k
Other Decks in Technology
See All in Technology
最近のフレッツとIPv6の話
mattenn
0
100
「一通りできるようになった」その先の話
hitomi___kt
0
150
Oracle Cloud Infrastructure:2023年1月度サービス・アップデート
oracle4engineer
PRO
0
190
創業1年目のスタートアップでAWSコストを抑えるために取り組んでいること / How to Keep AWS Costs Down at a Startup
yuj1osm
3
2.2k
書籍を書きました。 そう、VS Codeで。
takumanakagame
4
4.6k
オンプレk8sとEKSの並行運用の実際
ch1aki
0
330
立ち止まっても、寄り道しても / even if I stop, even if I take a detour
katoaz
0
1.2k
230125 古いタブレットの活用 かーでぃさん
comucal
PRO
0
17k
日経電子版だけじゃない! 日経の新規Webメディアの開発 - NIKKEI Tech Talk #3
sztm
0
350
CES_2023_FleetWise_demo.pdf
sparkgene
0
130
MoT/コネヒト/Kanmu が語るプロダクト開発xデータ分析 - 分析から機械学習システムの開発まで一人で複数ロールを担う大変さ
masatakashiwagi
3
810
YouTuber も編集マンもクラウド使って編集しよう。クラウド編集のキホン
eijikominami
0
140
Featured
See All Featured
Creatively Recalculating Your Daily Design Routine
revolveconf
207
11k
A better future with KSS
kneath
230
16k
How GitHub (no longer) Works
holman
298
140k
Intergalactic Javascript Robots from Outer Space
tanoku
261
26k
A Tale of Four Properties
chriscoyier
149
21k
Robots, Beer and Maslow
schacon
154
7.3k
Adopting Sorbet at Scale
ufuk
65
7.8k
GraphQLの誤解/rethinking-graphql
sonatard
39
7.8k
Mobile First: as difficult as doing things right
swwweet
213
7.8k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
224
50k
Raft: Consensus for Rubyists
vanstee
130
5.7k
How To Stay Up To Date on Web Technology
chriscoyier
779
250k
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.