使用现代 CSS 设计 HTML

作者：罗布·奥利里✏️

和 HTML 元素（统称为公开小部件）不容易设置样式。由于限制，人们经常使用自定义组件制作自己的版本。然而，随着 CSS 的发展，这些元素变得更容易定制。在本文中，我将介绍如何自定义披露小部件的外观和行为。

如何和一起工作吗？

是一个 HTML 元素，用于创建隐藏附加信息的公开小部件。公开小部件通常呈现为带有一些文本的三角形标记。

当用户单击小部件或聚焦于它并按空格键时，它会打开并显示其他信息。三角形标记指向下方表示处于打开状态：

披露小部件有一个始终显示的标签，由

提供。元素。这是第一个孩子。如果省略，则浏览器提供默认标签。通常，它会说“详细信息”：

您还可以在

之后提供多个元素表示附加信息的元素：

<details>
  <summary>Do you want to know more?</summary>
  <h3 id="Additional-info">Additional info</h3>
  <p>The average human head weighs around 10 to 11 pounds (approximately 4.5 to 5 kg).</p>
</details>

造型和

在设置

样式时应考虑一些互操作性问题。和元素。在讨论一些常见用例之前，让我们先介绍一下基础知识。

元素与 [

](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li) 元素类似，因为它的默认样式包括 display: list-item。因此，它支持 [list-style](https://developer.mozilla.org/docs/Web/CSS/list-style) 简写属性及其普通属性。浏览器对列表样式属性的支持相当好，但 Safari 仍然落后。

披露小部件有两个伪元素来设置其组成部分的样式：

1. ::marker 伪元素：表示位于
   开头的三角形标记。这个造型的故事有点复杂。我们仅限于一小组 CSS 属性。浏览器对 ::marker 的支持很好，但 Safari 目前不支持完整的属性集。我将在本文的“设置摘要标记样式”部分中更详细地讨论这一点
2. ::details-content 伪元素：表示
   的“附加信息”。这是最近添加的，因此浏览器支持目前仅限于 Chrome

在下面的部分中，我将演示一些更新的、鲜为人知的自定义披露小部件的方法。

动画打开和关闭动作

当您打开公开小部件时，它会立即打开。一眨眼，你就会错过它！

最好以更渐进的方式从一种状态转换到另一种状态，以向用户展示其操作的影响。我们可以为显示小部件的打开和关闭操作添加过渡动画吗？简而言之，是的！

为了实现动画效果，我们希望隐藏内容的高度从零过渡到其最终高度。 height 属性的默认值为 auto，这让浏览器根据内容计算高度。在添加 [interpolate-size](https://nerdy.dev/interpolate-size) 属性之前，在 CSS 中无法将动画设置为 auto 值。虽然浏览器对我们需要使用的新 CSS 功能的支持有点有限（主要是 interpolate-size 和 ::details-content），但这是渐进增强的一个很好的例子。目前它可以在 Chrome 中运行！

这是动画的 CodePen 示例。

披露动画如何运作？

首先，我们添加 interpolate-size，以便我们可以过渡到 auto 高度：

<details>
  <summary>Do you want to know more?</summary>
  <h3 id="Additional-info">Additional info</h3>
  <p>The average human head weighs around 10 to 11 pounds (approximately 4.5 to 5 kg).</p>
</details>

接下来，我们要描述封闭式风格。我们希望“附加信息”内容的高度为零，并确保没有内容可见，即我们希望防止溢出。

我们使用 ::details-content 伪元素来定位隐藏内容。我使用块大小属性而不是高度，因为使用逻辑属性是一个好习惯。我们需要在过渡中包含内容可见性，因为浏览器在内容处于关闭状态时设置内容可见性：隐藏 - 如果不包含它，关闭动画将无法工作：

<details>
  <summary>Do you want to know more?</summary>
  <h3 id="Additional-info">Additional info</h3>
  <p>The average human head weighs around 10 to 11 pounds (approximately 4.5 to 5 kg).</p>
</details>

动画仍然无法按预期工作，因为内容可见性属性是离散的动画属性。这意味着没有插值；浏览器将在两个值之间翻转，以便在整个动画持续时间内显示过渡内容。我们不想要这个。

如果我们包含transition-behavior:allow-discrete;，值会在动画的最后翻转，这样我们就得到了渐变过渡。

此外，当公开小部件处于中间状态时，我们通过将块大小设置为 0 来获得内容溢出。我们会在打开时显示大部分内容。为了防止这种情况发生，我们添加了overflow:hidden。

最后，我们添加打开状态的样式。我们希望最终状态的大小为 auto:

details {
    interpolate-size: allow-keywords;
}

这些是大致的思路。如果您想要更详细的视频说明，请查看 Kevin Powell 的演练，了解如何为

制作动画和。

为披露小部件设置动画时还有其他注意事项吗？

如果“附加信息”内容比宽，则披露小部件可能会水平增长。内容。这可能会导致不必要的布局变化。在这种情况下，您可能需要在

上设置宽度。

与任何动画一样，您应该考虑对运动敏感的用户。您可以使用prefers-reduced-motion 媒体查询来满足该场景：

/* closed state */
details::details-content {
  block-size: 0;

  transition: content-visibility, block-size;
  transition-duration: 750ms;

  transition-behavior: allow-discrete;
  overflow: hidden;
}

实施独家组（手风琴专用）

常见的 UI 模式是手风琴组件。它由一堆公开小部件组成，可以扩展这些小部件以显示其内容。要实现此模式，您只需要多个连续的

元素。您可以设置它们的样式以在视觉上表明它们属于在一起：

/* open state */
details[open]::details-content {
  block-size: auto;
}

默认样式相当简单：

每个占据自己的阵线。它们的位置靠近（没有边距或填充），并且由于邻近而被视为一个组。如果您想强调它们是组合在一起的，您可以添加边框并为它们提供相同的背景样式，如下例所示：

此模式的一种变体是使手风琴独占，以便一次只能打开一个披露小部件。一旦打开一个，浏览器就会关闭另一个。您可以通过

的name属性创建独占组。具有相同的名称形成一个语义组：

<details>
  <summary>Do you want to know more?</summary>
  <h3 id="Additional-info">Additional info</h3>
  <p>The average human head weighs around 10 to 11 pounds (approximately 4.5 to 5 kg).</p>
</details>

在使用专属手风琴之前，请考虑它是否对用户有帮助。如果用户可能想要消耗更多信息，这将要求他们经常打开项目，这可能会令人沮丧。

目前所有现代浏览器都支持此功能，因此您可以立即使用它。

设置摘要标记的样式

披露小部件通常在其旁边显示一个小三角形标记。在本节中，我们将介绍设置此标记样式的过程。

标记与

相关联。元素。添加 [::marker](https://developer.mozilla.org/docs/Web/CSS/::marker) 伪元素意味着我们可以直接设置标记框的样式。但是，我们仅限于一小组 CSS 属性：

• 所有字体属性
• 颜色
• 空白
• text-combine-upright、[unicode-bidi](https://developer.mozilla.org/en-US/docs/Web/CSS/unicode-bidi) 和方向属性
• 内容
• 所有动画和过渡属性

如前所述，类似于 [

](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li)；它支持列表样式的简写属性及其普通属性。虽然这听起来有点大杂烩，但通过一些示例会更容易理解样式选项。

在进入示例之前，先简单介绍一下浏览器支持。在撰写本文时，Safari 是唯一不完全支持标记样式的主要浏览器：

• Safari 支持当前仅限于对 ::marker 伪元素的颜色和字体大小属性进行样式设置。 Safari 支持非标准伪元素 ::-webkit-details-marker
• Safari 根本不支持设置列表样式属性的样式。参考CanIUse

更改标记的颜色和大小

假设我们想将三角形​​标记的颜色更改为红色，并将其放大 50%。我们可以做以下事情：

details {
    interpolate-size: allow-keywords;
}

这应该适用于所有浏览器。这是 CodePen 示例。

调整标记的间距

默认情况下，标记位于

文本内容的一侧。并且它们位于同一个边界框中。列表样式位置设置为内部。当它处于打开状态时，“附加信息”位于标记的正下方。也许您想更改其间距和对齐方式：

如果我们将 list-style-position 设置为 Outside，则标记位于

之外。边界框。这使我们能够调整摘要文本和标记之间的间距：

<details>
  <summary>Do you want to know more?</summary>
  <h3 id="Additional-info">Additional info</h3>
  <p>The average human head weighs around 10 to 11 pounds (approximately 4.5 to 5 kg).</p>
</details>

您可以在上面屏幕截图的第二个实例中看到这一点。

这是此示例的 CodePen：

更改标记文本/图像

如果要更改标记的内容，可以使用 ::marker 伪元素的 content 属性。根据您的喜好，您可以将其设置为文本。对于我的示例，我使用拉链嘴表情符号表示闭合状态，使用张口表情符号表示打开状态：

details {
    interpolate-size: allow-keywords;
}

要使用图像作为标记，可以使用 ::marker 伪元素的 content 属性，或

:
的 list-style-image 属性

/* closed state */
details::details-content {
  block-size: 0;

  transition: content-visibility, block-size;
  transition-duration: 750ms;

  transition-behavior: allow-discrete;
  overflow: hidden;
}

在下面的示例中，我们使用材质符号中的两个箭头图标作为标记。向右的箭头为关闭状态，向下的箭头为打开状态：

这些示例将在 Chrome 和 Firefox 中按预期工作，但 Safari 将忽略样式。您可以将其视为渐进式增强，然后就到此为止了。但如果您希望在所有浏览器中具有相同的外观，则可以隐藏标记，然后添加您自己的图像作为替身。这给你更多的自由：

/* open state */
details[open]::details-content {
  block-size: auto;
}

您可以使用新的标记图标（例如内联图像或通过伪元素）直观地指示状态。 已经（大部分）指示展开/折叠状态。因此，如果您使用内嵌图形，则应将其视为装饰性的。空的 alt 属性可以执行以下操作：

<details>
  <summary>Do you want to know more?</summary>
  <h3 id="Additional-info">Additional info</h3>
  <p>The average human head weighs around 10 to 11 pounds (approximately 4.5 to 5 kg).</p>
</details>

如果您愿意，您也可以选择将标记放置在

的末尾：

details {
    interpolate-size: allow-keywords;
}

但是，需要注意的是，隐藏标记会导致屏幕阅读器出现可访问性问题。 Firefox、VoiceOver、JAWS 和 NVDA 都存在一个问题，即如果删除标记，则始终会宣布公开小部件的切换状态。不幸的是，这种风格与国家息息相关。最好避免这样做。

设计

的“附加信息”部分

您可能想要设置披露小部件的“附加信息”部分的样式，而不会将样式泄漏到。因为

中可以包含可变数量的元素，所以最好有一个包罗万象的规则：

/* closed state */
details::details-content {
  block-size: 0;

  transition: content-visibility, block-size;
  transition-duration: 750ms;

  transition-behavior: allow-discrete;
  overflow: hidden;
}

我的做法是排除

使用 :not() 函数的元素。请记住，这针对的是每个元素，而不是作为单个部分的内容！

/* open state */
details[open]::details-content {
  block-size: auto;
}

或者，您可以使用 ::details-content 伪元素，它针对整个部分。这就是为什么你想用它来动画打开和关闭状态转换：

>@media (prefers-reduced-motion) {
  /* styles to apply if a user's device settings are set to reduced motion */

   details::details-content {
      transition-duration: 0.8s; /* slower speed */
   }
}

注意到区别了吗？该节的开头只有一个边距。

和

没有边距。使用 ::details-content 伪元素的缺点是浏览器支持目前仅限于 Chrome。

设计披露小部件时的常见错误

• 历史上，无法更改
  的显示类型。元素。 Chrome 中放宽了此限制
• 请小心更改
  的显示类型。默认为display:list-item;;如果将其更改为 display: block;，可能会导致标记在某些浏览器中被隐藏。这是 Firefox 中的一个问题：

<details>
    <summary>Payment Options</summary>
    <p>...</p>
</details>
<details>
    <summary>Personalise your PIN</summary>
    <p>...</p>
</details>
<details>
    <summary>How can I add an additional cardholder to my Platinum Mastercard</summary>
    <p>...</p>
</details>

• 你不能嵌套

• 因为元素具有按钮的默认 ARIA 角色，它会从子元素中删除所有角色。因此，如果您想要一个像

  这样的标题，总之，屏幕阅读器等辅助技术不会将其识别为标题。尽量避免这种模式：
  

  <details>
    <summary>Do you want to know more?</summary>
    <h3 id="Additional-info">Additional info</h3>
    <p>The average human head weighs around 10 to 11 pounds (approximately 4.5 to 5 kg).</p>
  </details>
  

• 隐藏标记会导致某些屏幕阅读器出现辅助功能问题。 Firefox、VoiceOver、JAWS 和 NVDA 都存在一个问题，即如果删除标记，则始终会宣布公开小部件的切换状态

还会有更多变化吗？

最近有一个大提案，帮助把做成了。浏览器之间更具可定制性和互操作性。第一阶段包括我在本文中介绍的一些内容：

1. 删除CSS显示属性限制，以便您可以使用其他显示类型，例如flex和grid
2. 更清晰地指定影子树的结构。这应该有助于与 Flexbox 和 CSS Grid 的互操作性
3. 添加 ::details-content 伪元素来寻址第二个槽，以便在
   中添加“附加信息”的容器。元素可以设置样式

令人兴奋的消息是上面列表中的第 1 项和第 3 项已在 Chrome 131 中发布（截至 2024 年 11 月）。下一阶段应该解决改进标记的样式问题。此外，还有一组相关的更改将有助于提高这些元素的动画能力。

结论

在 CSS 中自定义 HTML 元素变得更加容易。现在，您可以创建具有完整浏览器支持的专用组，将打开/关闭状态的转换动画化为渐进增强，并执行标记的简单样式。

的致命弱点是标记的样式。好消息是，有一个积极的提案可以解决这个问题和其他一些痛点。这应该可以消除使用

时的所有障碍。在不久的将来，您将不需要编写自己的披露小部件或使用第三方 Web 组件！ ？

---

您的前端是否占用了用户的 CPU？

随着 Web 前端变得越来越复杂，资源贪婪的功能对浏览器的要求越来越高。如果您有兴趣监控和跟踪生产中所有用户的客户端 CPU 使用情况、内存使用情况等，请尝试 LogRocket。

LogRocket 就像网络和移动应用程序的 DVR，记录网络应用程序、移动应用程序或网站中发生的所有情况。您无需猜测问题发生的原因，而是可以汇总和报告关键前端性能指标、重放用户会话以及应用程序状态、记录网络请求并自动显示所有错误。

现代化调试 Web 和移动应用程序的方式 - 开始免费监控。

以上是使用现代 CSS 设计 HTML

和

的详细内容。更多信息请关注PHP中文网其他相关文章！