还在为弹窗写一堆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是不是已经能搞定了？