devgo.cn你有没有过这种经历：想给页面加个弹窗，第一反应是引一个 UI 库；想做手风琴折叠，得写一堆 JS 状态管理；想要输入框自动补全，又去翻 dropdown 组件文档。其实这些功能，现代浏览器里的 HTML 已经原生支持了，而且代码量少得惊人。Chris Burnell 的这篇页面就是专门盘点这些“HTML 也能干”的动态功能，看完你会觉得，以前好多 JS 真是白写了。
先说最实用的 popover（弹出层）。以前做浮层最头疼的是 z-index 层级和点击外部关闭的逻辑，现在一个 `popover` 属性全搞定。按钮上用 `popovertarget` 指向目标元素，目标元素加上 `popover` 属性，点击按钮就能切换显示。按 Esc 关闭、点击空白处关闭（light dismiss）都是浏览器内置行为，还自动跑到顶层，不用管 z-index。代码就两行属性，零 JavaScript。
和 popover 类似的是 `<dialog>` 元素，专门用来做模态对话框。它同样可以用 `popover` 属性配合按钮开关，也可以走更传统的 `showModal()` / `close()` 方法。原文还特别提到一个叫 `command` / `commandfor` 的新特性：让一个按钮直接控制另一个元素的命令，比如 `command="show-popover"` 就能打开指定的 popover，`command="hide-popover"` 关闭它。目前浏览器稳定支持的命令还只有 show-modal、close、request-close、toggle-popover、show-popover、hide-popover 这几个，但未来可能扩展到增减数值、控制媒体、复制文本等场景，值得关注。
另一个让我意外的是 `<details>` 元素的分组手风琴效果。以前多个手风琴互斥需要 JS 维护状态，现在只要给一组 `<details>` 设置相同的 `name` 属性，浏览器自动实现“打开一个就关闭另一个”。比如两个 `<details name="example-group">`，打开第二个时第一个会自动收起。这是纯 HTML 的独家魔法，连 class 都不用。
图片懒加载也早就不是 IntersectionObserver 的专利了。`<img loading="lazy">` 一行属性，浏览器会在图片接近视口时才加载，性能优化零成本。还有一个比较新的 `hidden="until-found"`：元素默认隐藏，但当用户通过浏览器搜索或跳转到对应锚点时，浏览器会自动移除这个隐藏属性，把内容显示出来。原文提醒这个特性目前对屏幕阅读器的搜索支持不太好，但作为“藏宝”式交互还是可以留作后用。
表单方面，浏览器原生提供了颜色选择器 `<input type="color">`、日期选择器 `<input type="date">`、滑块 `<input type="range">`、进度条 `<progress>` 和计量条 `<meter>`。这些元素不需要任何 JS 就能工作，但原文也给了很实在的警告：这些原生控件的默认样式在不同浏览器里差异很大，可访问性体验也比较差，用之前要仔细评估。
`<datalist>` 是另一个原生自动补全方案。它给输入框提供预设选项列表，用户输入时浏览器会显示匹配建议，不需要引入任何下拉库。但原文同样提醒，这个特性在不同 input 类型上的支持参差不齐，浏览器实现也有不少问题，建议先观望，甚至暂时跳过。
整篇看下来，最核心的启发是：HTML 的演进速度比我们感知的要快得多。很多以前必须靠 JS 库才能实现的交互，现在原生标签和属性就能搞定，而且性能更好、代码更少。但也要清醒：浏览器实现和可访问性支持并不均衡，尤其是一些新特性，可能只在特定浏览器里表现良好。所以实际项目里，可以先在内部工具、原型演示或渐进增强的场景中用起来，同时做好降级方案。如果你正在做的是面向大众用户的高要求产品，那还是得先查清楚目标浏览器的支持情况，别让“原生魔法”变成“原生坑”。
内容与图片版权归原作者所有 · 原文: https://chrisburnell.com/html-can-do-that/