北京
还在为弹窗写一堆JavaScript代码？还在为手风琴菜单的交互逻辑头疼？2025年的HTML已经悄悄把这些活儿全包了。
从popover属性到dialog元素，再到支持分组互斥的details标签，HTML正在把原本属于JavaScript的地盘一块块收编。这篇文章带你盘点这些已经落地的主流浏览器功能，看看纯HTML到底能玩出什么花样。
popover：弹窗从此不用管层级
2025年1月起，popover属性在全部主流浏览器中可用。Chrome 114+、Edge 114+、Firefox 125+、Safari 17+等版本均已支持。
过去做弹窗，最头疼的就是z-index层级管理——弹窗总被其他元素盖住，还得手动控制焦点和关闭逻辑。现在只需要在HTML元素上加上popover属性，再用popovertarget指定触发按钮，浏览器自动处理一切：点击外部区域关闭（Light dismiss）、按Esc键关闭、层级自动置顶。
一个按钮加一个div，弹窗功能就齐了：
Toggle popover纯HTML弹窗，零JavaScript
dialog：模态框有了专属元素
早在2022年3月，dialog元素就已全面可用。Chrome 37+、Firefox 98+、Safari 15.4+等版本均支持。
和popover类似，dialog提供了更正式的模态对话框能力。配合form method="dialog"，关闭对话框甚至不需要一行JavaScript：
通过form method="dialog"关闭
关闭 当然，如果你需要更精细的控制，dialog也保留了JavaScript接口：.showModal()打开、.close()关闭，两种方式可以混用。
details分组：手风琴菜单零代码
2025年9月，details元素迎来重大更新——通过共享name属性，一组details可以变成互斥的手风琴菜单。打开其中一个，其他自动关闭。
Chrome 120+、Edge 120+、Firefox 130+、Safari 17.2+均已支持这一特性。
第一项
打开第二项时，这一项会自动收起
第二项
第一项已经自动关闭了
这个特性对移动端尤其友好——过去实现手风琴效果需要维护一堆状态变量，现在一个name属性搞定。
浏览器支持情况一览
三个特性在主流浏览器中的支持情况如下：
- popover：Chrome 114+、Edge 114+、Firefox 125+、Safari 17+，2025年1月全量可用
- dialog：Chrome 37+、Edge 79+、Firefox 98+、Safari 15.4+，2022年3月全量可用
- details分组：Chrome 120+、Edge 120+、Firefox 130+、Safari 17.2+，2025年9月全量可用
值得注意的是，command和commandFor属性也在陆续落地中，未来可能进一步扩展dialog等元素的纯HTML控制能力。
对前端开发意味着什么
这些原生能力的成熟，意味着大量基础交互场景可以摆脱对JavaScript框架的依赖。弹窗、模态框、手风琴菜单——这些曾经必须引入UI库才能优雅实现的功能，现在用几行HTML就能完成。
当然，这不意味着JavaScript要退出历史舞台。复杂业务逻辑、数据交互、动画效果仍然需要JS。但至少，那些重复性最高的基础组件，正在变成浏览器内置能力。
对于开发者来说，这意味着更少的依赖、更快的加载速度、更少的兼容性坑。下次再遇到弹窗需求，不妨先想想：HTML是不是已经能搞定了？
特别声明：以上内容(如有图片或视频亦包括在内)为自媒体平台“网易号”用户上传并发布，本平台仅提供信息存储服务。
Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.
