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
240
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
120
Having no patience(Japanese)
muan
1
350
JSDC
muan
2
490
Design with Code
muan
5
520
Having no patience
muan
1
280
Design in GitHub
muan
5
350
Project Lab Squirrel #2
muan
1
520
Project Lab Squirrel #1
muan
8
760
A girl with no patience
muan
18
1.9k
Other Decks in Technology
See All in Technology
自己改善からチームを動かす! 「セルフエンジニアリングマネージャー」のすゝめ
shoota
6
600
Postman v10リリース後を振り返る / Looking back at Postman v10 after release
yokawasa
1
160
VS CodeでAWSを操作しよう
smt7174
8
1.6k
サーバー間 GraphQL と webmock-graphql の話 / server-to-server graphql and webmock-graphql
qsona
2
190
Janus
bkuhlmann
1
490
Compose Compiler Metricsを使った実践的なコードレビュー
tomorrowkey
1
220
Google Cloud Next '24でブログを10本書いた方法と勉強会を沸かせた方法
yasumuusan
0
290
私が trocco を推す理由
__allllllllez__
1
220
開発生産性大幅アップ!Postman VS Code拡張機能
nagix
2
380
長期間TiDBを使ってきた話 @ 私たちはなぜNewSQLを使うのかTiDB選定5社が語る選定理由と活用LT / Experiences with TiDB Over Time
chibiegg
2
890
Java EE/Jakarta EEの現状と将来―クラウドネイティブ時代にJava EEは対応できるのか?―
takakiyo
1
160
MySQL の SQL クエリチューニングの要所を掴む勉強会
andpad
2
6.3k
Featured
See All Featured
The World Runs on Bad Software
bkeepers
PRO
61
6.7k
Design by the Numbers
sachag
274
18k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
352
28k
Agile that works and the tools we love
rasmusluckow
325
20k
The Power of CSS Pseudo Elements
geoffreycrofte
60
5k
How to Ace a Technical Interview
jacobian
272
22k
Why You Should Never Use an ORM
jnunemaker
PRO
51
8.6k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
121
39k
Testing 201, or: Great Expectations
jmmastey
28
6.4k
The Straight Up "How To Draw Better" Workshop
denniskardys
227
130k
WebSockets: Embracing the real-time Web
robhawkes
59
7k
Building Adaptive Systems
keathley
31
1.9k
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.