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

Popover API について

Avatar for Hasegawa Hasegawa
September 09, 2024
Technology
30
0

Popover API について

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

Avatar for Hasegawa

Hasegawa

September 09, 2024

Other Decks in Technology

See All in Technology
なぜ、IAMロールのプリンシパルに*による部分マッチングが使えないのか? / 20260518-ssmjp-iam-role-principal
Avatar for opelab opelab
2
150
Cortex(Code) を ML モデルの 精度改善サイクルに組み込む.pdf
Avatar for Yuki Fushinuki oimo23
0
250
LT準備のToilを削減 〜決定論×確率論のスライド生成CLI〜
Avatar for Shu Kobuchi shukob
0
120
インプロセスQAのための要因から捉えるプロジェクトリスクマネジメントnano #1 開発リソース効率状態への対処 #jasstnano
Avatar for barus_qa_dev barus_qa
0
220
[4] Power BI Deep Dive [2026-05]
Avatar for Ohata Masatoshi ohata_bi
0
110
続 運用改善、不都合な真実 〜 物理制約のない運用改善はほとんど無価値 / 20260518-ssmjp-kaizen-no-value-without-physical-constraints
Avatar for opelab opelab
2
320
【2026年版】プロジェクトマネジメント実践論｜現役エンジニアが語る！～チームでモノづくりをする時のコツとは？～
Avatar for MIXI ENGINEERS mixi_engineers
PRO
1
120
ソフトウェアサプライチェーン攻撃対策として今からサクッとできること
Avatar for GMO Flatt Security flatt_security
2
100
LookerとADKで作る社内AIエージェント
Avatar for chanyou0311 chanyou0311
0
290
AWS WAFの運用を地道に改善し、自社で運用可能にするプラクティス
Avatar for ANDPAD inc andpad
1
660
CARTA HOLDINGS エンジニア向け 採用ピッチ資料 / CARTA-GUIDE-for-Engineers
Avatar for CARTA Engineering carta_engineering
0
47k
GCASアップデート（202603-202605）
Avatar for 高橋広和 techniczna
0
240

Featured

See All Featured
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
378
71k
The agentic SEO stack - context over prompts
Avatar for schlessera schlessera
0
780
We Are The Robots
Avatar for Honza Javorek honzajavorek
0
230
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
128
55k
Become a Pro
Avatar for Speaker Deck speakerdeck
PRO
31
5.9k
From Legacy to Launchpad: Building Startup-Ready Communities
Avatar for Dug Song dugsong
0
210
End of SEO as We Know It (SMX Advanced Version)
Avatar for Michael King ipullrank
3
4.2k
Chasing Engaging Ingredients in Design
Avatar for Sebastian Deterding codingconduct
0
190
Heart Work Chapter 1 - Part 1
Avatar for Lake Fama lfama
PRO
7
36k
Code Reviewing Like a Champion
Avatar for maltzj maltzj
528
40k
Measuring Dark Social's Impact On Conversion and Attribution
Avatar for Stephen Akadiri stephenakadiri
2
200
We Analyzed 250 Million AI Search Results: Here's What I Found
Avatar for Josh Blyskal joshbly
1
1.3k

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 は神。