尘埃落定性描写细节摘要_解释“细节”和“摘要”元素

尘埃落定性描写细节摘要

开发了许多JavaScript库，以便为我们提供网站上的其他交互式小部件。同样，HTML5还解释了许多流行的交互式组件，使它们成为本机Web功能。在本文中，我们将研究一个称为<details>元素（并在此过程中使用<summary>元素），该元素为我们提供了类似于手风琴的交互式小部件。

使用`<details>`和`<summary>`

<details>元素可以在<body>范围内的任何位置使用。举一个简单的例子，我们可以这样添加它：

<details>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas, impedit.</p>
</details>

上面的示例显示了包含段落的<details>元素，突出显示了其与其他HTML段落元素的相似性。它定义了一个语义部分，该语义部分又可能包含子元素（例如图像）和<figure>元素，诸如<input>和<textarea>表单元素，甚至嵌套其他<details>数组。

唯一的不同之处在于浏览器如何在前端显示此元素。支持的浏览器（例如Chrome，Safari和最新版的Opera）将在侧面显示一个小三角形和一条明细线。

<details>元素的作用类似于手风琴小部件，因为其中的内容最初将被隐藏。切换箭头或单击与箭头水平对齐的任意位置，将显示隐藏的内容。我们也可以使用Tab键以及Space或Enter键来突出显示它。

注意：AccesibleCulture在屏幕阅读器和详细信息 / 摘要中全面介绍了辅助功能。

开放状态

打开details元素后，如果现在使用dev工具浏览源代码，您会发现浏览器已在处于此状态时附加了open属性。实际上，我们可以手动将open属性添加到<detail> ，以显示默认情况下打开的内容。

<details open>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas, impedit.</p>
</details>

摘要元素

<details>元素与称为<summary>的元素一起提供；这两个是要结合使用的，但是使用<summary>元素是完全可选的。

那么当您使用它时会发生什么呢？

<details open>
<summary>Hello World</summary>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas, impedit.</p>
</details>

给定以上示例，默认的Detail将被Hello World代替。

套料

如前所述， <details>元素可能包含其他嵌套的<details>元素，如下所示：

<details>
<summary>Hello World</summary>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas, impedit.</p>
<details>
<summary>Hi, How are you?</summary>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas, impedit.</p>
</details>
</details>

确实存在一个视觉问题（浏览器默认样式）（嵌套列表不会出现这种情况）。如下所示，嵌套元素与模糊真实层次结构的父元素一起向左对齐：

但是，通过添加一些简单的样式可以轻松解决此问题。因此，让我们看看如何设计这些元素。

使用CSS设置样式细节

<details>和<summary>元素可以像其他任何块元素一样设置样式。通过元素选择器，类或ID选择它们，并堆叠一堆属性以对其进行样式设置。

details {
padding: 15px;
background-color: #f6f7f8;
margin-bottom: 20px;
}

此外，您可以使用属性选择器为打开状态指定样式。

details[open] {
/* the style goes here */
}

<summary>元素也可以设置样式。说到这，如果将鼠标悬停在诸如按钮或锚点之类的可单击元素上，则光标通常会变成指针。但是<summary>元素并非如此，该元素也是可单击的。游标将变成text游标，感觉有点不自然，因此您可能需要修改默认样式，将游标定义为pointer 。

summary {
cursor: pointer;
}

造型三角形

现在，您一直想问一个问题：您可以为小三角形设置样式吗？目前还没有标准，但是Webkit为此使用了伪元素::-webkit-details-marker 。通过这种方式，我们可以自定义默认的箭头样式，例如颜色，背景色以及箭头大小。

summary::-webkit-details-marker {
color: #fff;
background-color: #000;
}

不幸的是，至少在撰写本文时，不可能直接通过::-webkit-details-marker替换箭头。唯一可行的方法是使用::before或::after替换它。

summary::-webkit-details-marker {
display: none;
}
summary:before {
content: "\2714"; /* the new icon */
color: #696f7c;
margin-right: 5px;
}

浏览器支持

在过去两年中，浏览器对这两个元素的支持得到了很大的改善。早在2011年和2012年，Chrome是唯一能够呈现<details>和<summary>浏览器-尽管该实现存在一些可访问性问题。 Safari和Opera仅在最近才加入该俱乐部。

因此，就支持Firefox和Internet Explorer而言，有多个polyfill选项可以模拟该功能，例如Mathias Bynens和jQuery Details开发的。尽管此polyfill看似依赖jQuery，但文件大小比jQuery UI库对应的文件小得多。

一旦实施，就可以像往常一样设置样式。

summary:before {
content: "\25B8"; /* unicode character of the litle triangle  */
color: #000;
margin-right: 5px;
}

有关浏览器支持的更多信息，请访问caniuse.com 。

用例和范例

您可能已经在野外看到了这些元素。例如，在网上购物时，您可能会发现一些网站在手风琴中包装了其产品的详细说明。否则，他们可能会在边栏中使用它来过滤结果，例如Payless 。

<details>和<summary>元素也非常适合组织通常在定价表布局中找到的FAQ项目和功能列表项目。我已经创建了一个演示，您可以在此处免费使用它。

结论

正如亚伦·伦姆斯登（Aaron Lumsden）在这篇文章中所说的

因此，非常感谢这个新元素。有一天，也许随着Web组件的出现，在添加简单的控件（如Accordion）时，构建网站或Web应用程序对JavaScript库的依赖程度会降低。

因此，您是否曾经在网站中使用<details>和<summary> ？

翻译自: https://webdesign.tutsplus.com/tutorials/explaining-the-details-and-summary-elements--cms-21999

尘埃落定性描写细节摘要