details标签适合纯文本摘要展开，但缺乏卡片所需边框/阴影/语义，且动画需max-height hack；正确用法是仅包裹摘要与全文关系，配合css和无障碍优化实现轻量折叠。
details 标签本身不是为新闻卡片设计的，但它能低成本实现「可展开/收起」的新闻摘要交互——适合轻量级新闻列表、FAQ式资讯页或移动端折叠详情。直接用它做“卡片”会丢失语义和样式控制力，但搭配合理 CSS 可以规避大部分问题。
为什么不用 details 做标准新闻卡片？
它天生缺乏卡片所需的视觉边界（无默认边框/阴影/圆角）、内容容器语义弱（summary 不是标题，details 内容不是正文区块），且浏览器对 details[open] 的过渡支持极差（max-height 动画需手动 hack）。如果你需要带图片、多段落、按钮、响应式栅格的新闻卡片，该用 article + Flex/Grid；details 只适合纯文本摘要+点击展开全文的极简场景。
details + summary 的正确写法
常见错误是把整张卡片塞进 details，导致结构混乱、可访问性下降。正确做法是只包裹「摘要→全文」这一对关系：
-
summary里只放标题和发布时间（用time标签），不放图片或按钮 - 全文用
p或div包裹，避免在details内嵌套header/footer等语义标签 - 必须给
summary加role="button"和tabindex="0"，否则键盘用户无法聚焦操作 - 不要依赖
details[open]::after改箭头——各浏览器默认图标不一致，应重置并用伪元素统一控制
CSS 控制展开动画与卡片感
原生 details 不支持 transition，必须用 max-height + overflow: hidden 模拟。关键点：
- 设
details的max-height初始值为1.5em（刚好容纳summary行高），展开时设为足够大的固定值（如500px） -
summary需设display: list-item并清除默认 marker，再用::marker替换为自定义图标 - 为获得卡片感，给
details加border-radius、box-shadow和padding，但注意padding-bottom在收起状态要等于summary高度，否则有空白错位 - 移动端慎用：iOS Safari 对
max-height过渡有渲染延迟，建议加will-change: max-height
容易被忽略的兼容性坑
details 在 IE 完全不支持，Edge 79+ 才支持，旧安卓 WebView（≤4.4）也无支持。若需兼容，必须提供降级方案：
- 用
@supports (display: details)包裹增强样式，否则老浏览器会显示裸露的details内容 - JavaScript 降级：检测
HTMLDetailsElement是否存在，不存在则用aria-expanded+hidden属性模拟行为 -
summary的点击区域默认很小（仅文字宽度），务必加padding并设cursor: pointer - 无障碍要求：展开后焦点应自动移到新显示的内容首行，需用
focus()手动触发
details 的价值不在“做卡片”，而在“零 JS 实现可折叠摘要”。真要新闻卡片，别硬套；真要快速上线折叠功能，就接受它的限制——比如不支持图片懒加载、不能用 grid-area 布局、无法与 IntersectionObserver 直接联动。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
