如何在HTML网页中为details标签设计扁平化的现代视觉风格-html教程-PHP中文网

扁平化 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 事件手动暂停媒体与脚本。

如何在html网页中为details标签设计扁平化的现代视觉风格

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 不是标签名

正确写法：

details[open] > summary::before { transform: rotate(90deg); transition: transform 0.2s ease; }

注意加 transition，否则旋转生硬；ease 比 linear 更符合扁平化节奏感。

HTML Text Extract

从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

下载

扁平化按钮式 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 只控制显隐，不暂停内部逻辑。比如收起时还在播，仍加载，定时器照常执行。

解决办法不是靠 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');
  }
});

这个动作不能省——否则用户滚动页面时，后台视频耗电、音频串音、脚本持续占用主线程，都是真实性能问题。