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
LayerXにおけるLLMプロダクト開発の今までとこれから
layerx
PRO
4
700
生成AIの変革の時代に、直近1年で直面した課題とその解決策
ktc_wada
0
650
社内アプリで Cloudflare D1を プロダクト運用してみた体験談(Tokyo)
haochenx
0
120
競技としてのKaggle、役に立つKaggle
yu4u
6
2.3k
EMとして2023年度に頑張ったこと / What we did well in FY2023 as a EM
pauli
1
250
IPUT App Dev. Co. -Overview 2024/4
iputapp
0
130
【基本】データベース設計
oracle4engineer
PRO
2
180
プロンプトエンジニアリングでがんばらない-Agentic Workflow へ-近藤憲児
kenjikondobai
6
1.2k
止まらないLinuxシステムを構築する_高信頼性クラスタ入門
koedoyoshida
2
430
Building Dashboards as a Hobby
egmc
0
370
Cracking the KubeCon CfP
inductor
2
270
ExaDB-D dbaascli で出来ること
oracle4engineer
PRO
0
2.1k
Featured
See All Featured
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
126
32k
Atom: Resistance is Futile
akmur
260
25k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
22
1.6k
5 minutes of I Can Smell Your CMS
philhawksworth
199
19k
Why Our Code Smells
bkeepers
PRO
331
56k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
11
1k
Into the Great Unknown - MozCon
thekraken
14
1k
Side Projects
sachag
451
41k
Docker and Python
trallard
35
2.7k
GitHub's CSS Performance
jonrohan
1025
450k
Product Roadmaps are Hard
iamctodd
45
9.7k
The Brand Is Dead. Long Live the Brand.
mthomps
49
29k
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.