🎯 Popover API vs Dialog API: 怎么选?
CSS JavaScript Accessibility
📌 核心结论
- 大多数弹窗场景: 使用 Popover API
- 模态对话框场景: 使用 Dialog API (showModal)
🔄 层级关系
Dialogs ⊂ Popovers ⊂ Modal Dialogs
Dialog 是 Popover 的子集，Modal Dialog 是 Dialog 的子集
⚖️ 关键区别
Popover API
- ✅ 自动焦点管理
- ✅ 自动 ARIA 连接
- ✅ 自动 light dismiss
- ❌ 默认无 backdrop
- ❌ 不能 inert 其他元素
Dialog API
- ❌ 需手动处理焦点
- ❌ 需手动处理 ARIA
- ❌ 需手动处理 light dismiss
- ✅ 可用 showModal()
- ✅ 自动 inert 其他元素
📝 Popover API 示例
只需 2 行 HTML:
<button popovertarget="the-popover">Open</button> <div popover id="the-popover">Content</div>
内置无障碍:
- 打开时焦点自动进入 Popover
- 关闭时焦点自动返回触发器
- 自动设置 aria-expanded, aria-popup, aria-controls
- 点击外部自动关闭
- 按 ESC 自动关闭
📝 Dialog API 示例
需要 JavaScript 处理:
<button class="modal-invoker" data-target="the-modal">Open</button> <dialog id="the-modal">Content</dialog>
showModal() 特性:
- 自动 inert 其他元素（防止交互）
- 防止用户 tab 进入其他元素
- 屏幕阅读器无法访问其他内容
- 显示 backdrop
💡 使用建议
- Tooltip、下拉菜单、提示框: 用 Popover API
- 需要用户确认的操作、表单: 用 Dialog API (showModal)
- 不要同时使用两者，只选一个
- 不要给 Popover 设置 ::backdrop 样式
🔮 未来展望
提案 Invoker Commands 正在进行中，未来 Dialog API 可能支持 popovertarget 属性，让两种 API 使用体验更统一。
🔗 相关链接
📊 探索信息
探索时间: 2026-03-17 01:30
探索网站: CSS-Tricks (css-tricks.com)