在展开的 Details 元素上设置背景

<details> 元素的一个略微有点奇怪的地方是，当它展开时，并不总是 100% 清楚哪些内容在该元素内部，哪些内容不在。我并不是说这总是很重要，或者这是一个特别难以解决的问题，我只是注意到它最近对我来说出现了。

这是一个可视化示例

A screenshot of some text with details elements present. One of them is open. It's not clear what text is within that details and what isn't. — 这里哪些文本在 `<details>` 内部，哪些不在？

解决方案是……CSS。以某种独特的方式为 <details> 设置样式，这样问题就消失了。即使您希望排版保持一致，或者您不希望在 <details> 展开之前进行任何专属样式设置，这也是可能的。使用半透明填充，您甚至可以确保嵌套更深的 <details> 保持清晰。

对于您只是插入内联内容的 <details>（例如“剧透”UI 或其他内容），我喜欢使用某种边框或背景来显示内容的结束位置。对于嵌套的 details 也很不错。@CodePen https://#/1aVadri1Ci pic.twitter.com/jIvUquIbbw
— Chris Coyier (@chriscoyier) 2021年6月3日

这是 CSS 代码

details[open] {
  --bg: rgb(0 0 0 / 0.2);
  background: var(--bg);
  outline: 1rem solid var(--bg);
  margin: 0 0 2rem 0;
}

以及演示

Birdiedaboy

# 2021年6月11日

我已开始使用 Details 和 Summary 标签制作手风琴效果，它使一切变得简单，除了 Safari，它总是创建一些奇怪的东西，更别提那个标记了，它是唯一一个做疯狂事情的，这里是否有帖子已经在讨论全面设置此组件的样式？

Geoff Graham

评论永久链接# 2021年6月11日

目前样式设置有点棘手。但 Greg Gibson 有一篇不错的文章介绍了一些技巧，Chris 在这篇文章中也有介绍。

# 2021年6月12日

嗯，我不确定是否喜欢透明度影响可访问性。

难道简单地在每个元素周围放置一个轮廓并为内容提供清晰的视觉层次结构不是更简单吗？

https://codepen.io/mikegleeson/pen/eYvPbre

Guillaume

评论永久链接# 2021年6月16日
或者只是
```
details > :not(summary) {
  margin-inline: 1em;
}
```

评论

发表评论 取消回复

发表评论取消回复