扁平化 details 标签需清除默认 marker 并重建：summary { list-style: none; } summary::before { content: "▶"; margin-right: 6px; }；箭头旋转用 details[open] > summary::before 控制并加 transition；按钮式 summary 必须设 border、background-color、border-radius 且保留优化 outline；收起时需监听 toggle 事件手动暂停媒体与脚本。
details 标签的扁平化样式必须从清除默认 marker 开始
浏览器给 summary 自带的三角图标（::marker）不是“装饰”，而是语义锚点——直接用 appearance: none 或 display: block 会破坏 Safari 和旧 Edge 的点击逻辑。真正安全的起点是清掉原生标记，再用伪元素重建。
必须写这两行：
summary { list-style: none; }
summary::before { content: "▶"; margin-right: 6px; }
别碰 ::-webkit-details-marker：它只在 WebKit 有效，Firefox 和新版 Edge 已弃用；也别用 content: "" 空值清图标，某些 Safari 版本会把热区缩成一条线。
箭头旋转动画要靠 details[open] > summary::before 控制
用 details[open] summary::before 选中展开状态下的箭头，比用 summary[open] 更可靠——因为 open 是 details 的属性，不是 summary 的。
立即学习“前端免费学习笔记（深入）”；
常见错误写法：
-
summary[open]::before { transform: rotate(90deg); }→ 永远不生效 -
details open > summary::before→ CSS 选择器语法错误，open不是标签名
正确写法：
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
details[open] > summary::before { transform: rotate(90deg); transition: transform 0.2s ease; }
注意加 transition，否则旋转生硬；ease 比 linear 更符合扁平化节奏感。
扁平化按钮式 summary 需手动补全视觉锚点
把 summary 当按钮用时，不能只改颜色和圆角。Safari（尤其 iOS 16+）在 appearance: none 后会抹掉所有交互反馈，导致不可见、不可点。
必须显式设置三项：
-
border: 1px solid transparent—— 提供焦点 outline 的定位基准 -
background-color: #f8f9fa—— 扁平色块，禁用渐变或阴影 -
border-radius: 4px—— 扁平设计中 2–4px 是安全区间，50% 圆角会弱化按钮语义
同时保留原生 focus 行为：outline 不能删，但可优化为 outline: 2px solid #007bff; outline-offset: 2px;。
折叠内容收起后 JS 和媒体仍在运行，这点常被忽略
details 只控制显隐，不暂停内部逻辑。比如收起时 <video autoplay></video> 还在播，<iframe></iframe> 仍加载，定时器照常执行。
解决办法不是靠 CSS display: none，而是监听 toggle 事件手动干预：
const el = document.querySelector('details');
el.addEventListener('toggle', () => {
if (!el.open) {
el.querySelectorAll('video, audio, iframe').forEach(v => v.pause?.());
el.querySelectorAll('.js-autoplay').forEach(n => n.dataset.wasPlaying = 'true');
}
});
这个动作不能省——否则用户滚动页面时，后台视频耗电、音频串音、脚本持续占用主线程，都是真实性能问题。
