Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Popover API について

Avatar for Hasegawa Hasegawa
September 09, 2024
Technology
0
23

Popover API について

Popover API についての解説スライドです。

Avatar for Hasegawa

Hasegawa

September 09, 2024
Tweet

Other Decks in Technology

See All in Technology
2025-10-09_プロジェクトマネージャーAIチャンス
Avatar for taukami taukami
0
150
PHPからはじめるコンピュータアーキテクチャ / From Scripts to Silicon: A Journey Through the Layers of Computing Hiroshima 2025 Edition
Avatar for HASEGAWA Tomoki tomzoh
0
140
名刺メーカーDevグループ 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
0
930
JAZUG 15周年記念 × JAT「AI Agent開発者必見："今"のOracle技術で拡張するAzure × OCIの共存アーキテクチャ」
Avatar for KoheiOgawa shisyu_gaku
1
160
ニッポンの人に知ってもらいたいGISスポット
Avatar for sakaik sakaik
0
150
Claude Code Subagents 再入門 ~cc-sddの実装で学んだこと~
Avatar for Gota gotalab555
9
13k
フレームワークを意識させないワークショップづくり
Avatar for Keigo Suda keigosuda
0
200
今この時代に技術とどう向き合うべきか
Avatar for gree_tech gree_tech
PRO
2
1.9k
Claude Codeを駆使した初めてのiOSアプリ開発 ~ゼロから3週間でグローバルハッカソンで入賞するまで~
Avatar for Oikon oikon48
10
4.3k
LLMアプリの地上戦開発計画と運用実践 / 2025.10.15 GPU UNITE 2025
Avatar for Shumpei Miyawaki smiyawaki0820
1
580
Introduction to Sansan Meishi Maker Development Engineer
Avatar for Sansan, Inc. sansan33
PRO
0
310
20251014_Pythonを実務で徹底的に使いこなした話
Avatar for 森田　一平 ippei0923
0
200

Featured

See All Featured
Fantastic passwords and where to find them - at NoRuKo
Avatar for Phil Nash philnash
52
3.4k
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
29
4k
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
140
7.1k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
Avatar for Joe Casabona jcasabona
33
2.5k
Unsuck your backbone
Avatar for Amy Palamountain ammeep
671
58k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
115
20k
Product Roadmaps are Hard
Avatar for C. Todd Lombardo iamctodd
PRO
54
11k
A designer walks into a library…
Avatar for Paul Jervis Heath pauljervisheath
209
24k
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
79
6k
Learning to Love Humans: Emotional Interface Design
Avatar for Aarron Walter aarron
274
41k
The Psychology of Web Performance [Beyond Tellerrand 2023]
Avatar for Tammy Everts tammyeverts
49
3.1k
Music & Morning Musume
Avatar for Bryan Veloso bryan
46
6.8k

Transcript

  1. Popover API

  2. Popover API⁨⁩⁨⁩ とは ポップオーバー UI を、 JavaScript を使わず HTML のみで実現できる機能！

  3. マークアップはこんな感じ これだけで基本的なポップオーバー UI が実装できます。

  4. ポップオーバー UI のおさらい

  5. ポップオーバーとは 4 画面の「最上位レイヤー」に表示されるインターフェースA 4 ESCキーを押したり、別の要素をクリックすると、
 非表示になるA 4 基本的に、１つのポップオーバーが開くと
 別のポップオーバーは非表示になる。

  6. ダイアログとは何が違うの？ b ダイアログは「対話」の意図があるインターフェースR b 重要な情報を確実にユーザに伝え、必要に応じて対応
 できるようにするR b 直近のアクションを確認したり変更したりする
 オプションを提供する。など Human

    Interface Guidelines より

  7. Popover API で何が嬉しいか

  8. コンテキストに応じたマークアップ が可能に p dialog ではないのに、dialog role で使うケースがあった@ p ユースケースに応じたセマンティクスの拡張が可能に@ p

    Dropdown Menu、Note、Tooltip、Toast など。

  9. 標準でキーボード操作のサポート b ESCキーで閉じることが可能。(Light Dismiss標準搭載A b popover="manual" では Light Dismiss でなくなるe

    b 閉じたあと、トリガー要素に自動でフォーカスされるe b popover="manual" では自動で戻らないので注意。

  10. 標準で支援技術のサポート 3 スクリーンリーダーでボタンの開閉状態を読み上げる' 3 ポップオーバー要素はデフォルトで group ロール。

  11. スタッキングコンテキスト問題から解放 T z-index を使わなくても、画面の最上部に表示される! T DOM の配置を気にしなくて済む。

  12. Popover API まとめ  Popover APIは、セマンティクスでアクセシブルな
 ポップオーバー UI が JavaScript

    なしで作れる@  Web標準技術を駆使して、持続可能なデザインの実現  Open UI は神。